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머 리 말 

위대한 령도자 김정일대원수님께서는 다음과 같이 지적하시였다. 

《현대과학기술의 기초는 콤퓨터입니다. 콤퓨터가 출현하고 그에 따라 정보기술이 발전하면서 
사람들이 환상적으로만 생각하던 문제들이 현실로 되고있으여 자연을 정복하고 세계를 개조하는 
인간으 I 장조적힘은 더묵더 위력한것으로 되고있습니다.》 

위대한 령도자 김정일대원수님의 현명한 령도에 의하여 오늘 우리 나라에서는 정보기 
술을 빨리 발전시킬수 있는 물질기술적토대가 튼튼히 마련되였으며 새로운 정보기술성과들 
이 련이어 이룩되여 인민경제 여러 부문의 정보화，를퓨터화가 높은 수준에서 실현되고있 
다. 인민경제의 정보화는 콤퓨터를 떼여놓고 생각할수 없으며 콤퓨터기술을 발전시켜야 인 
민경제의 정보화를 적극 다그쳐나갈수 있다. 

오늘 를퓨터기술을 소유하는것은 사회성원으로서 응당 갖추어야 할 필수적인 자질로 
된다. 특히 콤퓨터망에서의 정보관리와 필요한 정보를 다매체편집물로 표현할줄 아는것 이 
매우 중요하다. 

위대한 령도자 김정일대원수님께서는 우리 학생들이 강성대국을 떠메고나갈 훌륭한 
인재들로 자라나도록 하시기 위하여 크나큰 사랑을 돌려주시였다. 

6학년 〈〈콩퓨터》에서는 를퓨터망의 리용방법과 홈폐지의 작성방법을 배우며 다매체 
편집물을 작성할수 있는 초보적 인 지식 에 대하여 배우게 된다. 

먼저 콤퓨터망을 통하여 필요한 정보를 수집하고 활용해나갈수 있도륵 하기 위하여 콤 
퓨터망의 일반적개념과 그 리용방법 및 콤퓨터망에서의 홈폐지작성방법에 대한 기본적인 
지식을 배우게 된다. 그리고 여러가지 다매체창작도구들을 리용하여 다매체작품을 만드는 
일반적인 방법에 대하여 배운다. 

우리는 콤퓨터에 대한 학습을 열심히 하여 우리의 사회주의강성대국을 과학과 기술로 
떠메고나갈 유능한 인재로 튼튼히 준비함으로써 위대한 령도자 김정일대원수님의 크나큰 
믿음과 기대에 보답하여야 한다. 
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제 1 장. 를페지만들기 

게，점. 홈제지에 대# 개 1 ! 

1. 인테 dl 트와 웨브의 개념 

우리가 사용하고있는 를퓨터통신망에는 국부망 ( LAN ), 지역망 ( MAN ), 광지역망 
( WAN ) 을 비롯하여 수많은 통신망이 있다. 이리한 매 통신망들은 서로 다른 하드웨어나 
통신규약정 보를 공유하거 나 협 조체 계 를 구성 하기 가 힘 들었 다. 

오늘의 정보시대에 알맞게 전세계적인 범위에서 다양하고도 신속한 정보교환문제를 원 
만히 해결하기 위하여 서로 다른 를퓨터통신망들을 련결시킬수 있는 통일적인 통신규약 
( TCP / IP ) 에 기초하여 세계각지의 국부적 인 망들을 하나로 련결시 킨 세계적 인 광지역망을 
인테 비트라고 한다. 즉 인터네트는 세계적규모에서 호상 접속된 를퓨터망환경이라고 말할수 
있 다. 

특정한 조직내의 각 를퓨터는 국부망에서 나란히 련결되며 이 국부망에서의 임의의 마 
디점은 모두 인터네트와 물리적으로 접속되므로 인터네트에 접속한 매 를퓨터들은 모두 인 
터네트의 다른 콤퓨터들과 직접 련결되게 된다. 따라서 인터네트는 콤퓨터들의 망이라고 
말하기보다는 망들사이의 망이 라고 하는것 이 더 적합하다. 



국부망 


현재 인터네트는 수십 억의 를퓨터와 사용자들을 망라하고있다. 

인터네트에서는 접속된 콤퓨터를 통하여 어떤 정보자료에 접근하면 그것과 련관된 문 
서들이 세계의 그 어디에 있든지 자동적으로 찾아갈수 있다. 그러므로 인터네트를 통하여 
새로운 경제정보，과학기술정보，새 소식 등과 갈은 많은 정보자료들을 봉사받게 되여 그 
사용자가 점점 늘어 나고있다. 

인터 네 트에 서 열 람기 ( Browser ) 라고 하는 말단봉사프로그람을 리 용하여 사용자는 간 
단한 마우스의 사용으로 여 러 봉사기에로 이동하면서 각이한 정보를 손쉽게 열람할수 있다. 
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이와 같은 문서방문체계가 바로 WWW (World Wide Web ： 세계적인 망) 혹은 간단히 웨 
브 ( Web ) 라고 하는 망응용체 계 이 다. 웨 브의 정 보구성단위 는 여 러 가지 이 름으로 불리 우는데 
그가운데서 가장 자주 쓰이는것은 콤퓨터의 한화면에서 볼수 있는 자료인 페지 ( page ) 와 문 
서 ( document ), 자원 ( resource ) 이다. 보통 페지는 본문，도형，비데오，화상，음성 및 그 
결합체인 다매체로 구성된다. 

웨브에서는 URL ( Uniform-Resource Locator ： 유일자원지 시기) 이라고 하는 주소를 
사용하는데 이것은 인터네트싸이트，웨브페지 또는 웨브페지에 포함된 그림들과 같은 정보 
들의 위치를 표시하기 위해 사용하는 주소이다. 

우리는 모든 인터네트설비를 이름으로 식별하지만 콤퓨터는 수자주소로 식별한다. 그 
리므로 우리가 사용하는 서로 다른 이름을 가전 각종 설비들을 를퓨터가 사용하는 수자기 
억기주소와 대응시키는 일종의 엄격한 대응관계가 필요하다. 

인터네트에 련결되는 매개 설비의 인터네트규약 ( IP ) 주소는 유일한 32 bit 수자인데 IP 
주소는 보통 4개 조의 8 bit 수자로 쓰고 점으로 분할한다. 이 런 표시 방식은 련관주소모임을 
지 정 하기 쉬 우며 인 터 네 트의 경 로콤퓨터 가 통보의 다음방향을 판단하는데 도 편 리 하다. 

각종 조직들은 많은 IP 주소토막을 가지고 차례로 그 주소를 인터네트에 접속해야 할 
설비들에 분배하는데 여기에는 절대다수의 콤퓨터들이 포함된다. 례를 들어 하나의 작은 
규모의 단체는 191.57.126.0 부터 191.57.126. 255까지와 같이 256개의 IP 주소를 얻을수 
있으며 매우 큰 기구는 첫 8 bit 수자가 특수한 모든 IP 주소 례건대 12.0.0.0 부터 
12.255.255. 255까지와 같은 1 600만여개의 IP 주소를 얻을수 있다. 

사람들이 우에서와 같은 IP 주소의 수자들을 처리하거나 기억하기 힘들므로 인터네트 
우의 설비는 문자화된 이름도 가지고있다. 이 런 이름의 시작부분은 주를퓨터이름이고 뒤부 
분은 점차 커지는 닫긴 기계모임 즉 령역 ( domain ) 인데 두개，세개 또는 그 이상의 령역이 
름이 있을수 있다. 실례로 를퓨터주소 coml . sec . edu . kp 에서 coml 은 주를퓨터이름이고 
sec 는 주륭퓨터 coml 의 국부령역이다. 그리고 sec 령역은 edu 령역의 일부분이며 또 edu 
령역은 kp 령역의 일부분이다. 

웨 브에 서 의 주소는 다음과 같이 구성 되 여있 다. 

규약이■://콤퓨터주소(:포구번호)/등록부경로/문서이 ■ 

실례: http :// coml . sec . edu.kp 

http : / / com 2. sec . edu . kp / mydata/my school . html 

웨 브와 인터 네 트는 서 로 다르다. 인터 네 트가 호상통신을 진행할수 있는 장치 를 통하여 
서 로 련결된 를퓨터 및 기 타 설비들의 모임 이 라면 웨 브는 쏘프트웨 어 와 규약들의 모임이며 
이리한 쏘프트웨어와 규약들은 인터네트의 모든 또는 절대다수의 를퓨터에 설치된다. 
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어떠한 추상적 의미로 말하면 웨 브는 하나의 거 대 한 문서 의 모임 이 며 그가운데 서 일부 
문서들은 서로 련결되였으며 웨브열람기를 사용하여 이 문서들을 방문하며 웨브봉사기는 
이런 문서들을 제공해준다. 

웨브열람기는 가장 간단한 경우에 문서를 제공해주는 웨브봉사기에게 어떤 문서를 방 
문하겠다는 요청을 보내고 웨브봉사기는 문서를 찾아 웨브열람기에게 보내주며 웨브열람기 
는 그 문서 를 사용자에 게 현시 해 준다. 

비록 웨브가 많은 규약을 지원하지만 가장 자주 쓰이는것은 직접 웨브문서를 지원하는 
하이퍼본문전송규약 (HTTP) 이 다. HTTP 는 웨 브열 람기 와 웨 브봉사기 사이에 통신을 진행하 
는 일종의 표준형식 을 제 공한다. 인터네 트는 TCP/IP 통신규약，웨 브봉사기 와 웨 브열 람기， 
홈폐지 (Home Page) 또는 하이퍼본문서술언어 HTML, 하이퍼본문전송규약 HTTP 와 같 
은 국제표준들을 리용한다. 

를퓨터 망이 나 자료통신에서 는 통신규약 (Protocol) 이 라는것 이 중요한 개 념 으로 쓰인다. 

통신 규약이란 를퓨터망에 존재하는 기계(를퓨터나 를퓨터주변장치)들사이에 통신이 이 
투어지기 위한 약속과 규칙들의 총체를 말한다. 말하자면 콤퓨터의 자료들은 모두 수자자 
료 즉 비트나 바이트로 이루어졌으므로 그것들이 통신될 때 무엇을 의미하며 어떤 의미를 
가지고 언제 어떻게 통신되여야 하는가를 공통짓기 위한 약속과 규칙들의 총체가 바로 통 
신규약이 라고 할수 있다. 

모든 를퓨터망체계는 독립적 인 하나의 작은 기능을 수행하는 층들로 구성되므로 통신 
규약은 여러개의 단순한 통신기능준위를 약속하는 계층구조로 이루어진다. 다시말하여 통 
신쌍방의 대응하는 층마다에 해 당한 규약이 존재한다. 

를퓨터망체계에서 계층과 통신규약의 묶음을 망구성방식 (Network Architecture) 이라 
고 한다. 

현재 세계적으로 일반화된 콤퓨터통신규약에는 TCP/IP, FTP 와 HTTP, 하이퍼본문 
등이 있다. 

인터 네 트에 서 는 다른 종류의 콤퓨터 들과 통신을 진행할 때 TCP/IP 를 사용한다. 

TCP/IP (Transmission Control Protocol/Internet Protocol : 전송조종규약/인 터 네 트 
규약)통신규약은 인터 네트를 비롯하여 일반적 인 국부망들 그리 고 인트라네트 (Intranet) 등 세 
계적 으로 가장 널리 리용되는 통신규약이 다. 

TCP/IP 는 를퓨터망의 조상인 Arpanet 와 그 계승자인 인터네트에서 연구되고 리용 
된 통신규약이다. 인터네트는 1969 년에 구축한 Arpanet 로부터 발단되였는데 1980 년대에 
여러 대학이나 연구기관의 망을 련결하는 련합망으로 급속히 발전하였다. 1982 년에 TCP 
/IP 규약은 콤퓨터망접속의 표준규약으로 되였으며 두 콤퓨터가 인터네트를 통하여 서로 
련결될수만 있다면 한대의 콤퓨터에서 실행되는 프로그람이 직접 다른 를퓨터에서 실행되 
는 프로그람과 통신을 진행할수 있게 하였 다. 
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FTP 와 HTTP 는 TCP/IP 보다 웃준위의 통신규약으로서 TCP/IP 통신규약이 제공되 
여 있는 망에서 사용할수 있다. 

FTP (File Transfer Protocol : 파일전송규약) 는 인터네트에 있는 원격체계와 문서를 
주고받기 위한 통신규약이 다. 

FTP 는 원격체계에 대한 접속 (Login), 등록부 (Directory) 옮기기， 현재등록부 
(Current Directory) 의 목록제 시，문서 를 국부적 인 체 계 에 내 리 적 재 (Download) 등을 
할수 있다. 

HTTP (Hyper Text Transfer Protocol ： 하이퍼본문전송규약) 는 HTML 문서를 주 
고받기 위한 통신규약이 다. 

HTML 문서를 보여주고 HyperLink (초련결)로 련결된 문서에 쉽게 접근할수 있는 열 
람기에 의하여 HTTP 는 현재 가장 보편적 인 인터네트통신규약으로 되였다. 

HTTP 는 문자정보뿐아니라 그림，동화상을 비롯한 다매체자료는 물론 봉사기와의 련 
계를 통하여 봉사기쪽의 프로그람을 수행시킬수 있으므로 문서와 응용프로그람을 통합하는 
매체로 발전하고있다. 

2.홈폐지의개념 

콤퓨터망에서 리용되는 문서들은 보통 하이퍼본문과 하이퍼매체의 개념을 리용한다. 

하이퍼본문 (Hyper Text) 이라는 말은 일반본문의 기능을 초월하는 본문문서라는 뜻을 
가지는데 콤퓨터본문문서에서 련관된 정보들이 매듭이라고 하는 실마리단어를 통해 유기적 
으로 련결된 방식을 말한다. 여기서 매듭 (node) 은 하나의 정보를 포함하고있는 단위이며 
련결 (link) 은 매듭사이를 련결하는것을 말한다. 를퓨터의 기억능력파 검색능력을 활용하여 
정보를 탐색할 때 문서에 련결된 항목들을 선택함으로써 다른 문서에로 옮겨갈수도 있다. 

하이퍼본문문서는 본문만을 포함하는 반면에 하이페 IH 체 (hypermedia) 문서는 그림，도형， 
음성도 포함할수 있다. 

하이퍼본문이 나 하이퍼매체의 단위를 웨브에서는 페지 라고 한다. 

흄페지 (home page) 란 원래 뜻으로 말하면 첫 페지 라는것 이 다. 

일반적으로 우리가 책을 읽을 때 차례를 보고 필요한 폐지를 펼쳐보는것과 마찬가지로 
홈페지는 쉽게 말하여 책의 차례를 담은 첫 페지 라고 할수 있다. 

를퓨터망을 통하여 전송되는 자료가 여러 부분으로 이루어져있을 때 그 자료를 받아보 
는 사람이 처음으로 보게 되는 화면 즉 페지를 홈페 지 라고 불러 왔다. 

그러나 오늘날에 와서는 처음으로 보게 되는 폐지뿐만아니라 그것과 련결되는 자료전 
체 가 홈페 지 라는 의 미 로 리 용되 고있 다. 

오늘 홈폐지는 본문，화상，음성，동화상 등의 다매체정보로 이루어져있으며 망을 통 
하여 전송되여 많은 각이한 사용자들이 리용하는 특성으로 하여 일정한 규칙에 의하여 작 
성된다. 
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그러한 규칙에 의하여 홈폐지를 작성할수 있게 하는 언어가 바로 하이퍼본문생성언어 
HTML (Hyper Text Markup Language ) 이 다. 

하이 퍼 본문생성언어 HTML 은 홈폐지 를 작성할 때 리 용하는 페 지 작성언어 이 다. 영 문 
단어 Markup language 는 책출판업에서 유래된것이다. 책을 출판하려면 인쇄하기 전에 
본문을 어떻게 형식화할것인가，실례로 어떤 본문을 굵은 문자로 인쇄하도록 그 본문밑에 
물결선을 긋는것과 같이 여러가지 약속된 표식을 해놓는데 이것이 바로 Markup 이다. 

마찬가지 로 홈페 지 에 대 한 자료도 열 람기 가 해 석할수 있게 형 식 화된 다. 

HTML 은 본문，화상，영상，음성 등 각이한 정보들을 홈페지에 어떻게 표시하겠는가 
를 약속된 형 식 으로 서술한다. 

홈페지는 머리와 본체의 두 부분으로 이루어진다. 

머리는 홈페지의 첫 부분이다. 머리는 그 페지의 제목과 열람기가 리용하게 될 기타 
파라메터 를 포함한다. 

홈페지의 실지 내용은 본체 이다. 이것은 본문과 표식들을 포함한다. 본문은 페지 에 포 
함되 여있는 실지 정보이며 표식은 문서의 표시를 정의 한다. 

모든 HTML 표식은 선택적인 속성목록이 뒤따르는 이름이며 전체는 괄호 <〉안에 놓 
인다. 

3. 홈폐지의 열람 

홈폐지의 열 람은《 내 나라》열 람기를 리 용하여 진행 할수 있다. 

《붉은별 2.0》에는《내나라》열람기 2. 5가 표준으로 적재되여있다. 

홈폐 지 는 콤퓨터 망에 서 리 용되 는 문서이 므로 홈폐 지 를 열 람하려 면 우선 를퓨터 를 망에 
가입시켜 야 한다. 

《 시 작》ᅳ《 내 나라》열 람기 2. 5지 령 을 실 행 하거 나 탁상면에 서 그림 기 호 를 찰 

칵하면 《 내 나라》열 람기 2. 5가 펼 쳐 진다. 


문자의 3기 - CLHUBH 멸람기 
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flash 9.0 을 설지하시려면 
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보사〉〉라고 쓴 띠가 있는데 이 띠를 리용하여 가입하고싶은 망의 홈폐지를 펼치고 자료열 
탐을 할수 있다. 

홈폐지에는 다음과 같은것들이 있다. 
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만경대정보쎈터홈페지 








































































































정보산업 지도국 ( KCC - 조선콤퓨터쎈 터) 오산덕정보쎈터흠페지 



평양정보쎈터 ( PIC ) 홈페지 
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과학기술통보사를페지 
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규격자료에 대한 봉사들 시작하였습니다. (2009/12/01) 

도면집에 대한 봉사클 시작하였습니다. (2009/12/01) 

위대한 령도자 김정일동지의 최근 로작미 새로 소개 
되였습니다. (2009/8/25) 

인민 대 학습당 전자열당실에서 국내 학위론문원문봉사들 
시작하였습니다 •.(2009/7/5) 

인민대학습당의 11 강의일 정이 나왔습니 _ 
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인민대학습당홈페지 
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조선중앙방송위원회흠페지 



장아겨 기 



、억!！公受聲|울련쁘 1 


《붉은별 2.0》체계에서 망에 가입하기 위해서는 우선 자기 콤퓨터의 망자원 
즉 망모뎀이 준비되여야 하며 또한 모뎀의 해당 Driver 를 체계에 설치해주어야 
한다. 다음으로 망가입을 위해서는 자기 콤퓨터의 망주소를 설정해주어야 하며 
망장치의 입출력포구를 설정해주어야 한다. 

：：：：：：：； 
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다음으로 망에 가입하기 위해서는 해당 자기의 등록된 이름과 암호를 
중앙관리소(국가망정보쎈터)에 등록된 자기의 정보와 비교해 야 한다. 

그러기 위해서 자기의 이름과 암호를 입력해주고 망에 접속하기 위한 
KPPPoE 라는 프로그람을 동작시 켜 야 한다. 

거기서 〈〈사용자이름〉〉칸에 자기의 등록된 이름을 써넣고〈〈접속암호》칸 
에 등록된 자기의 암호를 입력하고〈〈접속〉〉단추를 찰칵한다. 

그래야 망관리자 즉 국가망정보쎈터에 있는 관리자가 정보를 확인하고 
망에 가입할 권한을 준다. 

그러면 망에서 자기가 열람하려고 하는것을 마음대로 할수 있다. 



그러면 화면에 다음파 같은 창문이 펼쳐 진다. 



이 때 이 창문에 서 OK 단추를 찰칵하고 과제 띠 의 그림 기 호 j 를 찰칵하 

면 《 내 나라》열 람기 2. 5가 펼쳐지 는데 여 기서 자기 가 접속하고싶은 망에 접 
속하여 자료열람을 하면 된다. 
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게 2 4 . 《친자도저4» 

HTML 은 프로그람작성언어 가 아니 다. 그것 은 계산과정 을 서술하는데는 리 용할수 없 
고 오직 웨 브열 람기 가 현시 하는 문서 들의 일 반형 식 과 설계 에 대 하여 서 술하기 때 문이 다. 

HTML 문서 는 기 본내 용자료와 그를 배 치 하고 형 식 화하기 위한 예 약어 들로 이 루어 져 있 
는데 예약어들은 괄호 <〉로 둘러싸여있다. 이 예약어들을 꼬리표 ( tag ) 라고 하는데 이것들 
은 실지 홈페지를 펼쳐볼 때에는 나타나지 않는다. 

HTML 문서 작성은〈〈 본문편집기》를 리용하여 진행할수도 있고 웨브개발도구를 리용 
하여 진행할수도 있 다. 

《 본문편집 기》를 리 용하여 《 전자도서 관》홈페 지 를 작성 하는 파정 을 동하여 HTML 
의 기본문법을 학습하기로 한다. 

1. 도서목록의 작성 

《 전자도서관》홈폐지 에는 무엇보다도 해 당 도서관에 들어있는 도서들을 보여주는 도 
서목록이 있어 야 한다. 

도서목록을 작성하자면 도서를 과목별，종류별로 분류하여야 한다. 

그리 고 분류된 도서 들에 대 한 목록을 작성 하기 위하여 문자들을 입 력 하고 본문과 폐 지 
의 형 식 화를 진행 하며 표를 작성 하고 내 용을 주가하여 야 한다. 

1) HTML 문서작성방법 

HTML 문서 에서는 꼬리 표를 리 용하여 본문에 대 한 입 력과 형 식 화를 진행한다. 

모든 HTML 문서에는 4개의 꼬리표 < HTML 〉，〈 HEAD 〉，〈 TITLE 〉 및 < BODY > 가 
필요하다. 

실례 : 《시 작》ᅳ《 응용프로그람》《보조프로그람》ᅳ《 본문편집기》지 령을 실행 하 
여 본문편집 기 를 펼 치 고 다음과 같이 입 력한다. 

< HTML > 

< HEAD >< TITLE > 문자의 크기 </ TITLE 〉</ HEAD > 

< BODY > 

<FONT SIZE = n r > 전자도서관1 
</ FONT >< BR > 

<FONT SIZE = n 2’’> 전자도서관 2 
</ FONT >< BR > 

<FONT SIZE = n 3’’> 전자도서관 3 
</ FONT >< BR > 

<FONT SIZE = n 4’’> 전자도서관 4 
</ FONT >< BR > 
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〈FONT SIZE = n 5 n > 전자도서관 5 
</ FONT > 

</ BODY > 

〈/ HTML 〉 

파일차림표의 《다른 이름으로 보관》지령이나 도구띠의 파일보관그림기호를 찰칵하여 
문서보관대화칸을 펼치고 우의 문서를 례하면 l - l . html 이라고 이름을 달아 보관한다. 



〈〈내나라》열람기를 펼치고《파일 ( F )》 ᅳ《파일 열기》지령을 실행하여 나타나는과 
일열기대화칸에서 l _ l . html 문서를 열어보면 다음과 같다. 


문자의 크기 - CLHUBH 열맘기 


am CD [E] 보기 [민 이동 [되 책! 

E h ni [B] 도구 田 도움말 ch 

수 ▼ - ▼ ^ □ 예 00 . 

▼ 빠 Naenar; 〔세 

내나라 한□ᅡ믐 국가망정보펜터 중앙과탁기술들보 M 


전자도서관 2 

전자도서관 3 
전자도서관4 

전자도서관5 


지 SH 
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실례에서 <HTML> 꼬리표는 오직 문서가 HTML 을 리용하여 작성된것이라는것만을 
표시한다. 따라서 정 상적 인 경 우에 HTML 문서 는 모두 꼬리 표 <HTML> 로 시 작되 며 꼬리 
표 </HTML> 로 끝난다. 

꼬리 표 <HEAD> 와 </HEAD> 는 각각 문서의 머 리부의 시 작과 끝을 표시 한다. 

또한 <BODY> 는 몸체 부분의 시 작을 표시한다. HTML 문서 는 머 리 부와 본체 두 부분 
으로 구성되였다. 문서의 머 리부는 문서의 내용이 아니라 문서와 관계된 정보를 제공한다. 
본체꼬리표사이의 내용이 문서의 내용이며 내용안에 사용한 꼬리표는 열람기가 어떻게 그 
부분의 내 용을 현시 해 야 하는가를 지 시한다. 

꼬리 표 <TITLE 〉 과 C/TITLE 〉 사이 의 본문은 열 람기 에 의 해 현시 창문의 제 목띠 안에 
표시된다. 

모든 꼬리 표들은 <HTML> 과 같은 시 작꼬리 표와 /기 호가 들어가있는 </HTML> 과 
같은 끝꼬리 표가 있어 야 한다. 

실례에서 보여주는바와 같이 머리부의 시작꼬리표 <HEAD> 와 함께 머리부의 끝을 의 
미하는 끝꼬리 표 </HEAD 〉 가 있 으며 제 목을 의 미하는 시 작꼬리 표 〈 TITLE 〉 다음에 제 목 
이 있고 그것이 끝나면 끝꼬리표 </TITLE 〉 이 있다. 

실례 에는 <BR 〉 꼬리 표도 있는데 이 꼬리 표는 행바꾸기를 하는 기 능을 준다. <BR> 는 
끝꼬리표를 가지지 않는다. 

행바꾸기 에는 <P> 꼬리 표도 있는데 이것은 행 을 바꾸면서 빈 행 을 하나 삽입한다. 
<P> 꼬리표는 끝꼬리표를 가전다. 

2) 문자의 크기，색，서제 설정 

문자의 크기，색，서체는 FONT 꼬리 표를 리 용하여 설정한다. 

FONT 꼬리표의 형식은 다음과 같다. 

〈FONT SIZE = “수값” 

COLOR = “색값” 

FACE = “서체명” > 


</ FONT > 

SIZE 는 문자의 크기를 나타내는 속성으로서 수값으로는 1~7 사이의 값이 설정될수 있 
다. 여 기서 1 은 제 일 작은 문자를 나타내 고 7 은 제일 큰 문자를 나타낸다. 

COLOR 는 문자의 색을 나타내는 속성으로서 색값은 16 진수로 표시되는 형식을 쓸수 
있다. 즉 R(RED ： 붉은색)， G(GREEN ： 풀색)， B(BLUE ： 푸른색)의 합성이라는 의미에 
서 #RRGGBB 형 식 으로 되 여 있다. 실례 로 #000000 은 검 은색， #FF0000 은 붉은색， #00FF 
00 은 풀색， #0000FF 는 푸른색， #FFFFFF 는 흰색으로 표시된다. 
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FACE 는 문자의 서체를 나타내는 속성으로서 서체명은 현재 체계가 지원하는 모든 서 
체이 름들이 다 리 용될수 있 다. 

실례로 우리 글 서체의 《청봉》체를 리용하려 한다면 KPChongbong 또는 WKL 
Chongbong 이 라고 입력하면 된다. 

3) 문자의 형식화，문서목록화，특수문자입력 

- 문자의 형식화 

문자의 형식화에는 굵게 쓰기，비껴쓰기，밑선긋기，중간선긋기 등의 내용이 포함된다. 
굵게 쓰기는 < B 〉， 비껴쓰기는 <1〉，밑선긋기는 < U 〉， 중간선긋기는 < S > 꼬리표로 정 
의된다. 또한 웃첨수붙이기는 < SUP 〉， 아래첨수붙이기는 < SUB > 로 서술한다. 

실례: 

< HTML > 

< HEAD 〉< TITLE > 글자의 속성 
</ TITLE ></ HEAD > 

< BODY > 

< B > 굵은 글자를 표시 </ B 〉< BR > 

<1〉약간 비껴쓴 글자를 표시 </ I 〉< BR > 

< U > 글자에 밑선긋기 </ U 〉< BR > 

< S > 글자에 중간선긋기 </ S 〉< BR > 
A < SUP 〉2</ SUP 〉+ B < SUP 〉2</ SUP 〉=0< BR > 

</ BODY > 

〈/ HTML 〉 
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- 문서목록화 

번호붙이 기 와 표식 붙이 기 는 < UL 〉，< LI >, < OL > 꼬리 표들로 정 의한다. 

< UL 〉 꼬리표는 표식 목록의 문서가 시작된다는것을 표시하고 < LI 〉 는 항목표식을 설정 
하며 < OL > 은 번호목록의 문서 가 시 작된다는것 을 표시 한다. 

< LI 〉 꼬리표는 끝꼬리표를 요구하지 않는다. 

실례: 

< UL > 

< LI > 수학 
< LI > 물리 
< LI > 화학 
< LI > 생물 
</ UL > 

< OL > 

< LI > 수학 
< LI > 물리 
< LI > 화학 
< LI > 생물 
</ OL > 


immt 열담기 


과연 cf ) ^4 fE ) ( V ) 이善 fs ) 새간지 ( b ) 玉千 m 오合딴 i 




〈죤卜 i 속 - 

響 w 企 . 

j file ： ///rootyi-3.h 

T 

1 身: 

전 ▼ 

Naenara 

이 

4 ᅵ 나 ?: h 환 바용 u 국가방정 SL 선 리 ᄂ」흉한4하기 令1 요사 


하"피하"^ 

수^ 4 세 


하 피 하 t 
수^4선 

■ ■ ■ ■ 

12 3 4 


생 

선 
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정 의 목록은 < DL 〉，< dt >, < DD > 꼬리 표들로 정 의한다. 

< DL > 꼬리 표는 정 의 목록시 작을 표시하며 < DT > 꼬리 표는 열쇠 로 되 는 단어앞에 붙이 고 
< DD > 꼬리표는 해설문의 앞에 붙인다. 

실례: 

< DL > 

< DT > 수학 

< DD > 여기서는 대수，기하，해석학 등의 교과서 및 참고서들을 취급합니다. 

< P > 

< DT > 외 국어 

< DD > 여기서는 영어，로어，중국어 등의 교과서 및 참고서들을 취급합니다. 
</ DL > 





tvmm 열람기 



과연 CF) ^4 fE) 요기 fV) 이善 CS) 서 간4 ( B ) 포千 江) i 合딴 ( 


♦ 


，처 

선」 


[j file ： ///rootyi-4.h 

▼ 


空， 

Naenara 




버 나하 환 바■옹 ᄇ 국가방생 S 거 리 u 音반과하기 令I 요사 


수 4 


여기서 본 대 수. 기 하, 해서 4 音의 모과서 및 참고서접■올 
，■卜균 법식 다. 


외奇어 


여기서은 영어, 至어. 舍북어 音到 교과서 H 참고서- 
여장 音니 다. 



특수문자의 입력은 &기호와 ;기호로 둘러막힌 문자로 서술한다. 
아래의 표에 특수문자표를 주었다. 
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표시 

서술 

설 명 

< 

& lt ; 

안같기식기호로 사용 

> 

& gt ； 

안같기식기호로 사용 

& 

& amp ； 

문자 &로 사용 

(공백) 

Snbsp ； 

여러개의 공백을 련속하여 서술할수 있다. 

© 

& copy ； 

저작권기호를 표시 

X 

& times ； 

곱하기기호로 사용 

M 

& quote ； 

인용부호속에서 문자로 사용 


이 밖에 문서형식화를 위한 여 러가지 꼬리표들이 있다. 

< PRE > 꼬리 표는 문서 를 그대 로 표시하는 기 능을 주며 < CENTER > 꼬리 표는 문서 를 
화면의 중심 에 표시한다. 

< DIV > 꼬리 표는 문장의 표시위 치를 설정하는 기능을 준다. 

<DIV ALIGN = n left ’’>: 문장들을 왼쪽으로 배 치 

<DIV ALIGN =’’ center ’’>: 문장들을 중심 에 배 치 

<DIV ALIGN =’’ right ’’〉: 문장들을 오른쪽으로 배치 

< P > 꼬리표도 역시 ALIGN 속성을 가지는데 그에 대한 설정은 다른 꼬리표들과 같은 
방법으로 해주면 된다. 

4) 페지의 배경색설정과 배경그림삽입 

홈페 지 는 어 떤 즉면 에 서 보면 직 관적 가치 를 가져 야 하는것 만큼 배 경 의 형 식 을 중시 하 
게 된다. 

폐지의 배 경색은 < BODY > 꼬리 표의 속성 을 지적하는 방법 으로 변경시 킨다. 즉 
<BODY BGCOLOR = n 색 값’’〉꼬리 표를 리 용한다. 

실례: 

〈BODY BGCOLOR = M # FFFFFF M > 

정열은 성공의 비결 
</ BODY > 

폐지 에 깔아주는 그림도 역시 < BODY > 꼬리 표의 속성 을 지적하여 설정할수 있다. 
폐지의 배경그림은 <BODY BACKGROUND ， 그림파일’’〉꼬리표를 리용하여 깔아준다. 
실례: 

<BODY BACKGROUND : " file :/// usr / share / backgrounds / images / 선 군 8 경 / 
철령의 철득. jpg ’’〉 철령의 철득 </ BODY > 
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내나라 J 열방기 


과벌 CF ) 전 집 ( E ) 1기 rv ) 이各 ( S ) 새강지 ( B ) 土午 江) i 含 4 ( H ) 


令 ▼ ᅳ、 용 나 金 

因 file：///root/l-5.html 

▼ 

> 

函， 

N3Gn3T3 BBS 

시 


U 하마1 □ 극가안성 4선 며 □ 其용과하기 令4, t 사 


성 경의 청폭 


선 생 


문서 의 본체 내 용안에 어 떤 꼬리 표도 없는 본문을 포함할수 있다. 

이때에는 열람창문에 단락과 빈 행들이 무시된 본문으로 현시된다. 

5) 페지우에 선그리기 및 그림삽입 
페지에 선을 그리려면 < HR > 꼬리표를 리용한다. 

< HR > 꼬리표는 SIZE , WIDTH , ALIGN 등의 속성을 가전다. 

SIZE 속성은 선의 굵기를 설정 하고 WIDTH 속성 은 선의 길 이를 설정하며 ALIGN 속성 
은 선의 가로방향배 치 를 설정한다. 

실례: 

< HR > 

<HR SIZE = n 4” WIDTH = f ' 100 M ALIGN = f ' CENTER M > 

</ HR > 

여기서 SIZE 값은 화소수를 나타내며 WIDTH 값은 폐지의 가로길이에 대한 퍼센트 
(%)를 나타낸다. 

페 지 우에 그림 을 삽입 하려 면 < IMG > 꼬리 표로 삽입할수 있 다. 

< IMG > 꼬리표는 SRC , ALIGN , ALT , BORDER , HEIGHT , WIDTH , HSPACE , 
VSPACE 등의 속성을 가전다. 

SRC 속성은 그림 파일의 이름을 지정 한다. 
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ALIGN 속성은 그림과 본문을 함께 배치할 때 본문을 그림주위에 어떻게 배치하겠는가 
를 설정 한다. 

ALIGN 속성 이 가질수 있는 값들과 그 내용은 아래와 갈다. 

TOP - 본문을 그림 의 득대 기 에 배 치한다. 

MIDDLE - 본문을 그림 의 중간에 서 부터 배 치한다. 

BOTTOM - 본문을 그림의 밑에서부터 배치한다. 

LEFT - 그림 을 왼쪽에 배 치 하고 그 둘레 에 본문을 배 치 한다. 

RIGHT - 그림 을 오른쪽에 배 치 하고 그 둘레 에 본문을 배 치 한다. 

ALT 속성은 그림이 없을 때 그대신 본문을 나타내는 속성이다. 

BORDER 속성 은 그림 둘레 에 테 두리 선을 표시 하기 위한 속성 이 다. 

WIDTH 속성은 그림의 너비를， HEIGHT 속성은 그림의 높이를 설정 하기 위한 속성 이 다. 
HSPACE 속성 은 그림과 본문사이의 량옆여백 을 설정 하기 위한 속성 이며 VSPACE 속 
성 은 그림 과 본문사이 의 우아래 여 백 을 설정 하기 위한 속성 이 다. 

값은 화소수를 수자로 설정한다. 

실례: 

<IMG SRC =" file ：/ // usr / share / backgrounds / images / 선군8경/대홍단의 감자 
꽃바다’’ ALIGN = n LEFT ，’ BORDER=’V WIDTH = n 150 n HEIGHT =’70 n 〉 



6) 표작성 

HTML 에 는 표작성 을 위한 < TABLE > 꼬리 표가 준비되 여있 다. 
〈 TABLE 〉 꼬리표는 다음과 같은 속성을 가지고 표를 짜고 변경시 킨다. 


BORDER - 테 두리 선의 너 비 로서 값은 화소수를 지 정한다. 
WIDTH - 표의 너 비 로서 %값을 준다. 
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HEIGHT - 표의 높이로서 %값을 준다. 

BGCOLOR - 표의 배 경 색 으로서 16 진수값을 지 정한다. 

BORDERCOLOR - 테 두리 선의 색 으로서 16 진수값을 지 정한다. 
BACKGROUND - 표의 배 경 그림 으로서 파일 이름을 준다. 

실례: 

〈TABLE ALIGN = n CENTER ” BGCOLOR ^ M YELLOW " FRAME : n BOX n 〉< BR > 
< BR >< BR > 

<TBODY ALIGN= n CENTER n VALIGN= n CENTER” BGCOLOR= ， ’CYAN n > 
<TR> 

< TD > 수학일 화집 </ TD > 

< TD > 콤퓨터 일 화집 </ TD > 

</ TR > 

<TR> 

< TD > 물리 교과서 </ TD > 

< TD > 화학교과서 </ TD > 

</ TR > 

</ TBODY > 

</ TABLExBR><UxA HREF = M 1. HTML M ><DIV ALIGN :，， CENTER ，’〉 도서내용 
보기 </ DIV > </ A ></ U > 
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우의 실례 에서 <TR 〉 꼬리 표는 표의 한개 행 을 정의한다. 따라서 한개 행 을 만들고 다 
음행을 또 만들려면 〈 TR 〉 꼬리표를 반복하여 써 야 한다. 

<TR> 꼬리표도 역시 ALIGN, VALIGN, BGCOLOR 속성을 가전다. 이 속성들가운데 
서 VALIGN 속성은 행의 우아래배치를 설정하며 다른 속성들은 우에서 취급한 꼬리표들의 
속성 과 설 정 방법 이 같다. 

<TD> 꼬리 표는 행안에 세 포를 만든다. 

<TD > 꼬리표는 ALIGN, VALIGN, BGCOLOR, ROWSPAN, COLSPAN 등의 속 
성들을 가전다. 

ROWSPAN 은 세로방향으로 지정된 세포의 개수만큼의 높이를 가지는 세포를 작성하 
며 COLSPAN 은 가로방향으로 지정된 세포의 개수만큼의 너비를 가지는 세포를 작성한다. 
그밖의 다른 속성들은 다른 꼬리표들과 설정이 같다. 

2. 도서내용의 열람 

도서내용을 열람하기 위하여 도서목록의 매개 요소에 그 내용을 련결시켜야 한다. 

홈폐지에서 어떤 본문이나 화상을 마우스로 찰칵하였을 때 그와 련관된 다른 폐지 혹 
은 다른 파일을 펼치는것을 하이퍼 련결이 라고 한다. 

하이퍼련결은 홈페지가 가지고있는 가장 중요한 기능이다. 

하이퍼련결은 본문이나 화상뿐만아니 라 동화상이나 음성도 리용할수 있다. 

1) 본문을 통한 하이퍼 S 결 

본문의 하이 퍼 련결은 <A HREF 〉 꼬리 표로 작성한다. 

실례 : 

<A HREF= "filename. htm M > 

같은 층에 있는 파일을 열람한다. 

</A><BR> 

<A HREF= f '.. /filename. htm M > 

바로 우의 층에 있는 파일을 열람한다. 

</A><BR> 

<A HREF= "/dirname/filename, htm ’’〉 

아래층에 있는 파일을 열 람한다. 

</A> 

실례에서 보는바와 같이 련결하려는 파일이 현재 같은 서류철에 있는가，아니면 웃준 
위서류철에 있는가 혹은 아래준위서류철에 있는가 하는데 따라서 값형식 이 달라전다. 

실례에서 작성한 본문들은 화면에 현시될 때 밑줄이 그어진 본문으로 나타나며 그 본 
문들을 마우스로 찰칵하면 실례에서 지적된 파일들이 펼쳐지게 된다. 
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2) 화상을 통한 하이퍼 S 결 

화상을 통한 련결은 < IMG >, < MAP >, < AREA > 꼬리 표들을 가지 고 작성 할수 있다. 
화상을 통한 하이퍼련결은 화상의 전체부분을 범위로 할수도 있고 화상안의 임의의 부 
분 즉 원으로 된 부분이라든가 4각형 혹은 다각형으로 된 부분을 지적하여 범위로 할수도 
있 다. 

범위를 지정하는 속성은 다음과 같다. 

범위형태는 원 ( CIRC ), 4각형 ( RECT ), 다각형 ( PLOY ) 등이 있다. 

원의 경우: COORDS = n 중심자리표，반경” 

실례: COORDS = M 60, 78, 50" 

4각형의 경우: COORDS =” 왼쪽 웃구석 자리표，오른쪽 아래구석 자리표’’ 

실례: COORDS = n 45， 30, 80, 90，’ 

다각형의 경우: COORDS = n 첫번째 정점，두번째 정점 ，…” 

실례: COORDS = n 32， 74，53，78 ,…… M 
나머지 전부인 경우 COORDS 지정 이 필요없다. 

사용자들이 화상에서 마우스를 찰칵할수 있도륵 USEMAP 속성에서 식별이름을 붙여 
준다. 이때 식별이름은 < MAP > 의 NAME 속성의 식별이름과 같아야 한다. 

< MAP > 와 </ MAP > 꼬리표로 둘러막힌 범위내 에서 찰칵할수 있는 자리표와 수행되 여 
야 할 파일의 이름이 있다는것을 지정한다. 

실례: 


<IMG SRC= M images/menu_3. jpg M BORDER:，，。’’ 

U SEMAP= n #F rontpageMapO M > 
<MAP NAME= f 'FrontpageMapO M > 

<AREA SHAPE= ， ’CIRC n COORDS= ， ’353 ， 197, 512” 
HREF= f 'examplel. htm M > 

<AREA SHAPE=’’RECT” COORDS=”353 ， 167, 512, 184” 
HREF=’’example2. htm ’’〉 

<AREA SHAPE=’’RECT” COORDS=”352 ， 135, 508, 151 M 
HREF= f 'example3. htm ’’〉 

<AREA SHAPE=’’RECT” COORDS=”355 ， 103, 505, 119 M 
HREF= f 'example4. htm M > 

<AREA SHAPE= n CIRC” COORDS= n 353, 72, 400 M 
HREF= f 'example5. htm M > 

</MAP> 
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3) 한문서안에서의 하이퍼 S 결 

한문서안에서도 하이퍼 련결을 설정할수 있다. 

문서안의 한페지우에서 이동은 위 치를 지정하는 방법으로 작성한다. 
실례: 


<A HREF= n #40 n > 를퓨터<八 V 〉 

<A HREF=’’#50 n > 수학<八 V 〉 

<A NAME= n 40 n > 

를퓨터 기술은 크게 하드웨 어기 술과 쏘프트웨어 기술로 갈라본다. 

</A><BR> 

<A NAME= ， ’50 n 〉 

수학은 초등수학，고등수학，응용수학으로 갈라볼수 있다. 

</A><BR> 

문서안의 한페지 에서 다른 페지 에로의 이동은 이동하려는 페지 에 이름을 붙여주어 설 
정할수 있 다. 

실례: 


<A HREF =’’ computer n > 를퓨터 </ A > 

<A HREF= n ma 仕 l ，’〉 수학<八 V 〉 
computer , htm 에 서 
<A NAME = " computer ’’〉 

를퓨터 기술은 크게 하드웨 어기 술과 쏘프트웨어 기술로 갈라본다. 

</ A >< BR > 

math , htm 에서 
<A NAME = M math M > 

수학은 초등수학，고등수학，응용수학으로 갈라볼수 있다. 

</ A >< BR > 

4) 창문분할 

HTML 은 한개 화면에 여 러개의 폐지를 동시 에 표시할수 있는 화면분할기능 즉 
FRAME 기능도 가지고있다. 

FRAME 에 의하여 분할된 창문을 부분창문 혹은 자식창문이라고 하는데 이 부분창문들 
에는 다른 HTML 문서 가 놓일수 있다. 

창문분할은 < FRAMESET > 꼬리 표를 가지 고 진행 한다. 

< FRAMESET >^- ROWS , COLS , FRAMEBORDER , BORDER , BORDER 
COLOR 속성들을 가지고있다. 

ROWS 속성과 COLS 속성은 여 러개의 값을 가질수 있다. 
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ROWS = 수값 1(1 행의 높이)，수값 2 (2 행의 높이)，… 

COLS = 수값 1(1 렬의 너비)，수값 2(2 렬의 너비)，… 

수값은 각각 폐지의 높이와 너비에 대한》값이다. 

FRAMEBORDER 속성 은 분할하는 경 계 선을 표시 하겠는가 표시 하지 않겠는가를 설정 
하는 속성 으로서 YES 혹은 NO 의 값을 취 할수 있다. 

나머지속성들은 다른 꼬리표들에서의 속성들과 같은 값을 가전다. 

부분창문의 내 용과 속성 을 설정하는 꼬리 표로서 는 <FRAME〉 꼬리 표를 리 용할수 있 다. 
<FRAME〉 꼬리표의 속성과 그 기능은 다음과 같다. 

SRC = 주소 : 표시하려는 파일주소 

NAME = 이름 : FRAME 이름 

MARGINWIDTH = 화소수 : FRAME 의 량옆여백 

MARGINHEIGHT= 화소수 : FRAME 의 우아래여백 

SCROLLING = YES/NO : FRAME 의 표시 와 비 표시 

FRAMEBORDER=YES/NO : FRAME 들사이의 경계선의 표시 혹은 비표시 

BORDERCOLOR= #RRGGBB : FRAME 들사이의 경계선 색 

사용자는 우의 속성들가운데서 필요한 속성들을 임의로 선택하여 리용할수 있다. 

실례: 

〈FRAMESET ROWS= n 33%， 67%"〉 

<FRAME SRC= n l-4.HTML” NAME:，MARGINWIDTH:，’ 10，， 

MARGINHEIGHT^ f ' 10 M NORESIZE〉 

〈FRAMESET COLS= f '29%, 71% M > 

<FRAME SRC= n l-2.HTML n NAME= nn MARGINWIDTH: n 10 n 
M ARGINHEIGHT= f '10 M > 

<FRAME SRC= n l-3.HTML” NAME:，MARGINWIDTH: n 10” 

M ARGINHEIGHT= f '10 M > 

c/FRAMESET〉 

c/FRAMESET〉 

<HTML><SCRIPT LANGUAGE^"JAVASCRIPT M > 

WINDOW. OPEN ("README. EML M , NULL, n RESIZABLE=NO, TOP=6000, 
LEFT=6000，’) </SCRIPT〉</HTML> 
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제 2 장. 다매체만들기 

제 P 3. 다때체장4의 기초 


매 체 ( media ) 라고 할 때 그것 은 주로 정 보를 기 억 하거 나 표시 하기 위 한 수단들이나 정 
보를 표현하는 방식들을 의미한다. 즉 정보를 기 억해두는 수단들인 도서，륵음테프， CD , 
DVD , 하드디스크，휴대용기 억기 같은것들과 정보를 표현하는 방식들인 문자，도형，화상， 
음성，영상 등과 같은것들이 하나의 정보매체로 된다. 

다매체 ( multimedia ) 라는 말은《여러 매체》라는 뜻인데 여러가지 모양의 정보를 하 
나로 체계화하여 처 리하는것을 말한다. 주로는 영화와 같이 문자，화상，음성，영상 등을 
하나로 체계화하여 나타내는 정보를 다매체 정보라고 하며 이로부터 다매체를뉴터 기술은 문 
자정보，화상정보，음성정보，영상정보 등과 같은 각종 정보매체들을 하나로 조합하여 종 
합적으로 처 리 하는 기술이 다. 

다매체작품(다매체응용프로그람)을 창작하려면 그것을 실현하기 위한 도구가 있어야 
한다. 다매 체 창작도구를 리 용하면 앞에 서 배 운 화상처 리 기 술과 여 러 가지 다매 체 소재 들을 
가지고 훌륭한 다매체 작품을 쉽게 만들어낼수 있다. 

다매 체창작도구는 다매 체자료의 조종 말하자면 다매 체내 용물의 짜임 새부분을 프로그람 
작성언어 등의 깊은 지식 이 없이도 설계하고 창작할수 있는 도구를 말한다. 

다매체작품을 만들려면 간단한것이라고 하여도 화상들을 순차로 표시하고 그에 맞게 
소리를 울리며 문자렬을 제시하여야 하는데 이것을 프로그람으로 작성하려면 프로그람언어 
와 조작체계에 관한 지식과 함께 미술과 음악에 관한 일정한 전문지식도 소유하여야 한다. 
그러므로 일반적인 다매체작품의 제작에서는 우와 같은것을 간단히 될수륵 알기 쉽게，보 
다 많은 사람들이 할수 있도륵 해주는 도구가 필요하다. 이와 갈은 조건을 만족시키기 위 
해 개 발된 도구들이 바로〈〈 다매 체 창작도구》인것 이 다. 

지금까지 개 발된 다매체 창작도구들로서 는 VideoStudio , Macromedia Flash MX , 
Macromedia Director , Macromedia Authorware , ToolBook , HyperCard 등 여 러 가 
지가 있다. 

다매체창작도구들은 모두 서로 다른 개발환경과 자체의 기능과 특징을 갖추고있으며 
서로 다른 응용범위에 적용되고있다. 

다매체창작도구는 창작수법과 특징의 차이에 따라 다음과 같이 몇가지 류형으로 가를 
수 있다. 
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① 시간을 기준으로 한 창작도구 

이 류형의 다매체창작도구들은 시간축에 따라 통로들에 해당한 매체소재들을 배치해놓 
고 그것들의 출현순서와 출현시간，출현방법들을 결정하는 방법으로 다매체작품을 만들어 
낸다. 주로 영화나 만화와 같은 작품을 만들어 내는데 쓰인다. 

보통 다매체작품의 방영을 조종하기 위해 륵음기의 일반조종판과 비슷한 조종판을 갖 
추고있다. 이리한 창작체계에서는 각종 소재들과 사건들이 시간에 따라 조직된다. 

이 도구의 우점은 조작이 간편하고 형상이 직관적이며 어떤 시간구간안에서 다매체소 
재의 속성(례컨대 위치，돌리기，그림출현방식 등)을 임의로 조종할수 있다는것이다. 결함 
은 매 소재를 배치하고 출현시간을 정밀하게 설정해보는 작업량이 많은것이다. 

시 간을 기준으로 하는 전형적 인 다매체도구로는 Director 와 Flash 등을 들수 있다. 

② 그림기호나 호름선을 기준으로 한 다매체창작도구 

이 류형의 창작도구에서는 다매체소재와 호상작용사건들이 구조적인 틀거리나 흐름도 
에 따라 객체로 조직된다. 여기서는 항목의 조직방식을 간단화하였으며 또한 여러 정황에 
서 매 분기의 능동흐름도에 따라 현시하도록 하였다. 

다매체작품을 창작할 때 편집도구는 하나의 흐름선 ( line ) 에 서로 다른 류형의 그림기 
호들을 배치하고 사용하도록 함으로써 흐름도를 리용한 구조화프로그람에 귀착된다. 

다매체소재는 흐름도에 따라 출현하며 흐름도우의 임의의 그림기호에 대해 편집을 진 
행할수 있 다. 

이 도구의 우점은 조종과 시험이 편리하고 복잡한 개발과정에 대해 특별히 쓸모가 있 
다는것이다. 결함은 대규모의 다매체응용프로그람을 제작할 때 그림기호와 OR 분기가 많 
다는것 이 다. 

이러한 도구로서는 Authorware 를 들수 있다. 

③ 페지나 카드를 기준으로 한 다매제창작도구 

이 류형의 창작도구는 페지나 카드우에 다매체소재들을 배치하고 련결시키며 페지나 
카드별로 다매체종목을 만들어낸다. 이때 페지나 카드들은 구조화모형에서 하나의 이음점 
으로 되며 명령에 따라 필요한 임의의 폐지로 넘어가는 방식으로 다매체작품을 창작할수 
있 다. 

이 방식에서는 다매체소재를 조직하고 관리하는것이 편리하지만 처리하려는 내용이 많 
을 때 카드나 폐지의 수량이 많아져 수정에 불리하다는 특징을 가전다. 

이 리 한 도구에는 주로 HyperCard 가 있다. 

일반적 으로 다매체창작도구는 다음의 기능을 갖추고있어 야 한다. 
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① 아주 ■으면서도 객제지향적인 프로그람작성환경 

다매 체 창작도구는 각종 매 체 자료를 편집 하여 배 치 하는 환경 을 제 공하여 야 한다. 즉 매 
체원소에 대해서 조건이동，순환，산수연산，론리연산，자료관리，를퓨터관리와 같은 정보 
와 정보흐름을 조종하는 기본적 인 조작을 진행할수 있어야 한다. 

다매체창작도구는 또한 서로 다른 매체정보들로 프로그람을 작성하는 능력，시간조종 
능력，시험조종능력，동적파일의 입출력능력 등을 갖추고있어 야 한다. 

② 아주 강한 다매체자료의 입출력능력 

매 체 자료는 일 반적 으로 다매 체 소재 편집 도구로 완성 한다. 

그러 나 제 작과정 에 는 보통 원래의 매 체 소재 를 사용하거 나 새 로운 매 체 를 끌어 들이기 때 
문에 다매체창작도구도 역시 자료의 입 력 및 처 리능력을 갖추고있어 야 한다. 

그밖에 창작에 들어 가는 각종 매체 자료를 즉시 출현시켜 방영 할수 있어 야 한다. 

또한 다매체자료에 대한 검사와 확인도 진행할수 있어야 한다. 

③ 동화상처리능력 

다매 체 창작도구는 프로그람조종을 통하여 현시 창문의 자리 이 동과 매 체 원소의 이 동을 
실현함으로써 간단한 동화상을 제작하고 방영할수 있다. 

다매 체 창작도구는 또한 다른 동화상제 작프로그람으로 만든 동화상파일도 방영 할수 있 
으며 프로그람적으로 동화상에 있는 물체의 운동방향과 속도를 조종하고 각종 특기를 제작 
할수 있어 야 한다. 례를 들어 점도형화상도 이동할수 있고 동화상의 보임속성과 속도，방 
향도 조종할수 있어야 하며 특기기능으로서는 진하게 또는 연하게 하기，지우기，회전，투 
명 및 계층효과의 조종 등이 있어 야 한다. 

④ 하이퍼련결능력 

하이퍼련결능력이란 한 객체로부터 다른 객체에로의 뛰여넘기와 프로그람적인 이동， 
한 객체로부터 다른 객체를 시동하고 련결하는 능력을 말한다. 

다매체 창작도구는 한 정적 객체로부터 다른 정적객체에로 그리고 정적객체로부터 동적 
객체에로 또는 그 반대로 이동할수 있는 하이퍼련결능력을 갖추고있어야 한다. 

⑤ 응용프로그람과의 련결능력 

다매 체 창작도구는 외 부의 응용프로그람과 창작하는 다매 체 응용체 계 를 련결 할수 있 다. 

다시 말하여 한 다매 체 응용프로그람으로부터 다른 다매 체 응용프로그람을 기 동시 켜 자료 
를 래운 다음 실행하던 다매체응용프로그람에 로 되돌아올수 있다. 

다매체 응용프로그람에서 는 DDE 를 통하여 프로그람급통신을 실현할수 있으며 OLE (객 
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체의 련결과 매몰)를 리용하여 다른 프로그람을 련결(호출)할수 있다. 

⑥ 모듈화와 객제지향 

다매 체 창작도구는 개 발자가 독립 적 으로，단편적 으로 모듈화와 지 어 목표화까지 진행 하 
게 하여 작품의 《포장》과《계승》을 할수 있어야 하며 사용자의 요구에 따라 독립으로 
사용할수 있어 야 한다. 

보통 개발환경은 모두 객체지향적인 편집대면부를 제공하기때문에 사용할 때 오직 체 
계설계 방안에 근거 하여 야만 편리 하게 다매 체 작품을 제 작할수 있다. 

모든 다매체정보는 체계에서 직접 정의할수 있으며 요구에 따라 그 속성을 설정할수 
있 다. 

또한 총적으로 설치파일 혹은 실행가능한 파일을 만드는 기능을 갖추고있어 개발환경 
을 벗어난 후에도 실행할수 있어야 한다. 

⑦ 대면부의 편리성 

다매체창작도구는 아주 좋은 사람 - 콤퓨터사이 대면부를 갖추고있어 야 한다. 

화면에 현시하는 정보는 많지만 여러개의 창문，다중관리와 같이 란잡하지 말아야 한 
다. 그리고 필요한 직결검색 방조와 길잡이기능 지 어 교육파일까지 구비하고있어 야 한다. 

또한 사용자는 를퓨터를 다룰 때 가능한 인쇄문건의 도움이 없이도 기본적인 사용방법 
을 파악할수 있어 야 한다. 

이밖에 다매체창작도구는 조작이 간편하고 수정이 쉽고 안내와 도구분포가 합리적이여 
야 하며 좋은 기술적지원이 있어야 한다. 
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게 2 점. 게얼강4 


이 절에서는 현재 많이 리용되고있는 다매체창작도구인 VideoStudio 를 리용하여 우 
리 나라의 아름다운 선경을 보여주는〈〈제일강산》이라는 제목의 다매체편집물을 만들어보 
기로 한다. 


1. VideoStudio 의기동과 창문구성 

VideoStudio 를 기동하려면 다음과 같은 지령을 실행하여야 한다. 

Start—Ulead VideoStudio 9.0 SE DVD—Ulead VideoStudio 9 

VideoStudio 를 기동하면 다음과 같은 화면이 펼쳐진다. 







ULEAU 


Do not show this message again 


■邊 9 


여기서 VideoStudio Editor 를 찰칵한다. (VideoStudio Editor 는 동화상을 쉽고 간단 
하게 만드는 단계별작업흐름을 제공한다.) 

그러 면 VideoStudio 기 본창문이 펼쳐진다. 
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기본차림표 


작업 차림표 



r 


Untitled 


Project duration: 


• no•on no 

• UU • UU . uu 


Preview range: 

■ 

■ 


0：00：00.00 


0：00：00.00 


조종 칸 


You can select clips from the 
^ Library then drag them onto 
the Timeline. 



、 _ 


=® @ ® : ® @ @ ® 


00 : 00 : 00.00 



Wl 실]질®■호！넓 들) 


Video 


\ am & 


선택 칸 
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Movie Wizard 는 다매체편집을 처음 시작하거나 간단한 다매체편집물을 빨 
리 만들려고 하는 사용자들에게 적 합하다. 



다매체편집을 신속히 하려는 경우 Movie Wizard 를 사용하면 필요한 동화상 
및 그림파일들을 삽입하고 배경과 음악들을 추가한 다음 만들어진 편집물을 다매 
체파일로 출력하는것을 쉽게 할수 있다. 

Capture 는 촬영기를 통하여 영상 및 음성을 입력하여 그것을 를퓨터로 볼수 
있는 파일형식으로 전환하기 위한것이다. 

Insert Yideo 는 동화상을 입력하고 조작하기 위한것이며 Insert Images 는 
정지화상을 가지고 조작하기 위 한것 이 다. 

또한 Insert DVD/DVD-VR 는 CD 로부터 영상이나 화상，음성 등을 입력하 
고 조작하기 위 한것 이 다. 
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2 .제목장면만들기 


먼저 제목장면을 만들어보자. 

① 작업차림 표에 서 Title 을 찰칵한다. 그러 면 
창문은 본문편집창문으로 전환된다. 선택칸에는 제 
목형판들이 제시되며 조종칸에는 서체를 조종하기 
위한 선택칸들이 제시된다. 

② 선택칸에 서 마음에 드는 제 목형 판을 선택 한 
다. 실례로 Good bye 를 선택하자. 

③ 조종칸에서 Edit (편집)표쪽을 찰칵하고 입 
력칸들에 서 제 목의 출연시 간과 서 체 모양과 크기， 
색과 형식을 선택한다. 


Trtfe 


D BS 


Show Time My Summ... Are You R 


ItfcrfJ/P 


R，i Cebb... 





Fun Celeb... Good Times X'mas Paify 



실례로 서체는 청봉체，크기는 90，색 

은 붉은색 으로 선택한다. 

Multiple titles (다양한 제목)를 찰칵 


fl 


하고 그옆의 입력칸의 ■■를 찰칵하면 그림 
과 같이 서체형식선택대화칸이 현시된다. 여 
기서 마음에 드는 형식을 선택한다. 

④ 다음 미리보기창문에서 마우스를 찰 
칵하면 본문편집기가 나타나는데 여기에 제 
목글을 입력한다. 

본문편집기에 《제일강산》이라는 제 
목글을 입력한다. 


mwm 

SPEED Z.,J [inttie Gm |,T o 1% L~ 


"SCI 步나， i_ 


Wfm p __ 

■■■불 ^ 실^^^— 

H^ppv Hal... Summer Fun My Memor 


See You 


T^Enrf 


G ood bye 



보 
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선택칸을 보면 왼쪽그림과 같이 제목글이 제시된다. 



⑤ 제목글에 동화효과를 적용하기 위하 
여 조종칸의 Animation 표쪽을 찰칵한다. 

여기서 오른쪽그림과 같이 효과를 선택 
한다. 

⑥ 완성된 제목글을 아래그림과 같이 편 
집칸의 서 식 편집 띠 에 삽입 한다. 


Edit 


Animation 


13 Apply animation 

Type:' 


Drop 
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起층 1 항표)낸향 



환 


:•: 


Project 

eilfi 


]© 


©® 


File Edit Clip Tools ^ 

Untitled 

Edit Animation 

0 Apply animation 
Type ： 





Drop 


Capture 


Edit 

Effect 

Overlay 

Title 

Audio 

Share ’•ᄌ 

> 

— 



(受) OGD 


⑦ 제 목글의 배 경 화면을 편집 하기 위하여 작 
업차림 표의 Edit 를 찰칵한다. 

그리 고 선택칸에서 D 를 찰칵하여 나타나는 
목록에서 Color 를 선택하면 색형판들이 제시되 


는데 오른쪽그림과 같이 선택한다. 

찰칵한 다음 배 


조종칸에서는 Color 표쓰으 


ᄀ: 、乂ᄀ s 

경 판의 출연시 간을 설정 한다. 


Untitled 


幻 f * 



Color 


□ m 



■■潮 [250,237,... 



1:119..183..0) 


] 

| (1 32,2,1 G 4) | 01,0,166) | | [58,64,116) 



■ 

(111,33,0) 



[215,185,... 1:221/105,0) 


( 11 G.. 116 ,.. 


(245..24 S ,.. 


■■ 


B _ ■ ■ ■一 ■ 
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⑧ Play 단주를 찰칵하여 완성된 제목장면을 미리보기장문에 현시해본다. 


File Edit Clip Tools 

Untitled | 獻， 

Project duration: 


Edit 


Effect Overlay Title Audio Share 


© 

0 ： 00 ： 03.00 

Preview range: 

B 

n•nn•on on 
u • UU • UU.UU 

■ 

O•no • O D no 
U • UU • UJ.uu 


4 



You can select clips from the 
Library then drag the 
the Timeline. 广 Play 다 크 


년、 之 一 

경군 ® ® ® (《、뿐 변^린 黑 [245.245... 


減 tg @§ te 3 fe §) 


■■n 

(0 0,0) I (178,0,0) I I [250,237,... | 

mmm 

[[132,2:164)] 1(91,0,166)] |[58,64/1 IS)| 





[ 155 , 192 ,... 


[215,1 的 ,... 



⑯ mqp 


이렇게 하여 제목장면이 완성되였다. 
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3. 화상장면들의 편집 

그림 화상들을 삽입 하여 기 본장면들을 만들어 보자. 

① 기본차림표에서 File-^Insert Media File to Timeline—Insert Image 지 령을 실행 
하면 화상열기대화칸이 펼쳐진다. 



여기서 필요한 화상파일들을 찾아서 선택한 다음 Open 단추를 찰칵한다. 
그러 면 편집칸의 화상편집 띠 에 화상이 입 력된다. 




















































































② 삽입된 화상들에 효과를 주기 위하여 기 
본차림표에서 Effect 를 찰칵하고 조종칸에서 편 
집물의 종 줄연시 간수를 설정 한다. 

③ 선택칸에 서 를 찰각하여 나타나는 목 
륵에서 Transition _>3 D 를 선택한다. 그러면 선 
택 칸에 는 화면절환효파방식 들이 제시된다. 

④ 매 화상마다 화면절환효과방식가운데서 
하나를 선택하여 그 화상의 편집띠로 끌기한다. 
실례 로 첫 화상에 는 Accordion 을 삽입 해 보자. 


Untitled 


m 


!]:!]Q 



幻 


총 시 간수 

Project durati'iW 설정 한다. 



nn 
. uu 


Preview range: 




그러면 그림과 같이 절환효과가 삽입된다. 



이 와 같은 방법 으로 매 장면마다 절환효과를 삽입한다. 
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=® ® @ ④ @ @ © 


Proj^c.t ： 

Clip 


oo ： oo ： oo. oo 


리 ■_ 圈 



⑤ 화상들에 여 러 가지 효과를 주기 위 해 작업차림 표에 서 Edit 를 찰칵한다. 그리 고 조 
종칸에서 Image 표쪽을 선택한다. 여기서는 화면회전，색상수정 (Color Correction) 과 화 
상의 이동과 관련한 견본선택 (Resampling option) 을 할수 있다. 

⑥ Pan & Zoom 을 선택한다. 이 효과는 그림화상에만 적용되는데 화상들이 아래，우 
로 또는 량옆으로 이동하거 나 확대 및 죽소되 게 하는것 이 다. (화상을 선택 하고 이 효파를 
적용해 야 한다. 마스크된 화상에는 이 효과가 적용되지 않는다.) 

Pan & Zoom 아래의 D 를 찰칵하면 방식견본들이 제시된다. 여기서 마음에 드는것을 
선택할수 있 다. 


E:\schoDl-textV..\1.VSP ky 




⑦ 견본과 다르게 설정하려면 Customize (사용자정의)단추 




리 용한다. 



찰칵하면 Pan & Zoom 조종대화칸이 펼쳐진다. 여기서 화상들이 아래，우 


로 또는 량옆으로 이동하거나 확대 및 축소되게 하는것을 사용자의 의도에 맞게 설정을 할 
수 있다. 
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] Grid lines 



Timeline 

(5: 

| ] 」- 

00 : 00 : 00:00 


:受、 

=ni^iwi 

ᅳ d ᅳ' 



5tart 


Middle End 


Anchor: 


▲ 

% 

% (0.0 sec) 

X 

□ □ 

Zoom ratio nuu. JUUUI ： 

112 

▼ 

□ □□ 

Pause (0.. 100):: 

o 



Transparency (IJ..1 OlJ): 

o 





No panning 
Enable middle frame 

Background color: 


OK 


Cancel 



⑧ 매 화상에 따르는 글을 써 넣는다. 

매 화상장면에서 글을 써넣는 방법은 제목장면편집에서와 마찬가지이다. 
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File Edit Clip Tools 

E:\school-textV.A1.VSP It) 


Edit 


Capture 


Effect Overlay 



■ 

■ 

■ 

® Multiple titles 
O Single title 

□Vertical text 
□ Show grid lines 
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公 

]| Border/Shadow/Transparency 
]Text backdrop 


Alignment 
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File Edit Clip Tools 


E:\school-textV..\1.VSP 비 


. Capture 

Edit 

Effect 

Overlay 


Edit 


Animation 


m 
■ 

■ 

® Multiple titles 
O Single title 

□ Vertical text 

□ Show grid lines 



m 


公 

I Border/Shadow/Transparency 
IText backdrop 


Alignment 



Project 

Clip 


고:.、’ 9 @ ® ( i 기 @ © ® 


'척 



■ 
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장자강의 


m 


i 령의 i 쪽 | 




今 GPQP 


⑨ 마감장면을 만들기 위하여 먼저 배 경판색 을 선택한다. 


작업차림 표의 Edit 를 찰칵하고 선택칸에 서 D 를 찰칵하여 나타나 




모 


륵에서 Color 


1 @ 

ft 


몇 


■ ■ 0 _ ■ 


& 

k 

젊 

오 ^ 


A 


■ ■= ■ ■■ 
■■■■■ 


he 


Yo 




! ■ 


:•: 


-? 


를 선택 하면 색 형 판들이 제시 되 는데 그림 과 같이 선택 한다 . 
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마감장면이 완성되였다. 




VideoStudio 기 본창문에서 Storyboard View (장면 그림 판보기)는 동화상프로 
젝트의 요소를 가장 리해하기 쉽게 표시하는 보기창문이다. 동화상프로젝트의 요 
소들을 끌기로 간단히 배렬하거 나 삽입 하고 절환효과를 줄수 있다. 

Timeline View (시간선보기)는 동화상프로젝트의 요소를 포괄적으로 가장 
리해 하기 쉽 게 표시하는 보기 창문이 다. 다시 말하여 동화상프로젝 트의 매 개 요소 
즉 음성，동화상，제목，효과 등을 개별적으로 정확하게 조절할수 있게 하는 보 
기 이 다. 

Audio View (음향보기)는 음성의 색갈을 조절할수 있게 하는 창문이다. 여 
기서는 음성의 색갈을 매 프레임별로 작품의 특성에 맞게 조절할수 있다. 
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4. 음성의 삽입 


Open Aiiclia File 

Look in: 그 MP3 


Flecenl ： 



Desktop 


My Documents 

■ 

My Computer 

冷 

My Network 


File name: 
Files of type: 


Auto play 


해돋미 순간 . MP3 


All Formats 




Open 


Cancel 


o 


Info, 



Browse, 


A 


청춘 ? I 사광 . MPA 

년 축 U ᅢ클 들孔 MP 3 
J^J 축복하노라 . wma 

& 토장의노라 I.mp3 
쇠 평양은 나의 심장. MP3 
쇠 평양의 꿀빛 .MF_ 3 
§양51 M 계절. MP3 
년 푸른 버드나무. MP：3 
하나므1 생각. MP3 
년 하늘아래 첫 S.MP3 
쇠 한 녀학생 의 일기 .MP3 
占 한모습3자. wma 
쐐 한나의 메아리- 동백꽃 한송 01.wma 
년 I :!■로 . MP 3 
보| 해당화므I 노대. MP3 


S\ 

M _i 細 # 

최 행복의 빛 l]|B ᅡ오 . wma 
쇤 휘거음악 . MF_ 3 

S 

틔망 .mp3 


다매 체편집 에 서 마지 막으로 음악을 삽입해보자. 

① 기본차림표띠에서 File—Insert Media File to Library—Insert Audio 지 령을 실 
행하면 Open Audio File (음성파일열기)대화칸이 나타난다. 

여기서 음악파일을 찾아서 선택하고 Open 단추를 찰칵한다. 

실례로 음악《해돋이순간》을 선택하였다고 하자. 


그러면 아래의 그림과 같이 선택한 음악이 선택칸에 기입된다. 



타 

一一 

!1 
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,00:02:30.04 


00:03:00.06 


해돋이 순간. MP3 


File Edit Clip Tools 

Untitled 

Music 公 Voice Auto Music 

■ 


Capture 


Edit 


Effect 


Overlay 


Title 


03：0& 0& 


■ | 100 | [히 B .“ II Hu. 


Share 


Audio 


I 0：00.0! 


(g) CPQPc 


Record Selected Track 
Play Selected Track 
i Record Voice 


Import from Audio CD 
■ Playback Speed 
Audio Filter 


메아리 |-;l 장자강대 i 령의 i 한드레벌 


제일강산 


[ 박술초 


CH 홍단의 m 백두산다 I ( 


범안리의 


Pr ® 그 上) ® @ ④ 1 公: @ ^ 


-기하여 음악편집띠에 
한다. 


Audio 


A 01 해돋미 ... 

- - 


② 선택칸에서 기 입된 음악파일 《 해돋이순간》을 끌어서 
띠 에 삽입한다. 

③ 음악의 방영시간을 화면의 연시시간과맞춘다. 

이렇게 하면 다매체편집물제작이 기본적으로 

완성된다. 

④ 끝으로 지금까지 만든 편집물을 다매체파 
일로 전환시켜 야 한다. 

우에서 만든 전체 프로젝트를 다매체파일로 



기호가 


ᄇ ᄋ 

운 TT 


음악편집 


전환시키기 전에 먼저 확장자가 vsp 인 Video 
Studio 파일로 보관한다. 

기본차림표띠 에서 File-^Save 또는 Save As 
지 령을 실행 한다. 

그러면 Save As 대화칸이 펼쳐지는데 여기서 


보관할 서류철을 선택하고 파일이 
음 Save 단추를 찰칵한다. 


g ᄋ 

'石- S 


입력한 다 


% 

m 

© 


re ate Video File 


re ate Sound File 


re ate Disc 


]mject Playback 


zxport 



DV Recording 


■ ■ ■ 

그 Share Video Orilire 


다음 작업차림 표에 서 Share 를 선택 하면 조종 
칸이 오른쪽그림과 같이 되는데 여기서 Create 
Video File 을 선택 한다. 

그러면 차림표가 펼쳐지는데 거기서 적당한것을 선택하면 다음의 Create VideoFile 대 
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화칸이 나타난다. 


Create Video File 1 ' 0 


Save in: New Folder ▼ J 효 [: ， [TH 卜 


7Tools Partition Manager 

Portable Get Data Back v3.03 

7-zip 

PTD3 

Active Undelete 

Space Monger 

□Clean 

Filerecovery 

Unknown Devices 

Low-Fomat Tools 


OffByOne 



File name: 


333 


S-3ve 

% . .TT. . j- 






Save as type: 

MPEG files ( K .mpg) 

W 


Cancel 






Name: 

NTSC VCD 


Options... 


Properties: 


MPEG files 

24 Bits, 352 k 240.. 23.37 fps 

Frame-based 

[Video CD-NTSC), 4:3 






보관하려는 서류철을 선택 하고 Save 단추를 찰칵한다. 
그러면 Rendering 창문이 펼쳐지면서 넘기기를 시작한다. 

Rendering: 0% completed... Press ESC to abort. 


넘기기가 끝나면 작품의 완성이 끝난다. 

다매체열 람기 에서 완성된 작품을 실행시켜 본다. 
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게 3 점. 태양주多• 도冬 행>3 


이 절에서는 중심에 구모양의 물체(태양)가 있고 그 주위로 작은 구(행성)가 타원궤도 
를 따라 움직이 도록 하는 동화상을 동화상제 작도구 Macromedia Flash MX (보통 Flash 
라고 한다.)를 리용하여 만들어보기로 한다. 

1. Flash 의 기동과 창문구성 

Flash 를 기동하려면 다음과 같은 지령을 실행하여야 한다. 


Start—Programs—Macromedia—Macromedia Flash MX 


Flash 를 기동하면 다음과 같은 창문이 펼쳐진다. 



Flash 의 창문은 무대 (Stage), 도구칸 (Tools), 조색판 (Panel) 들과 Timeline (시간 
선)으로 이루어져있다. 

무대는 Flash Movie 를 보는 부분이다. 무대에서 그림을 그리고 본문이나 음성을 주 
가하고 단추를 만드는 등 작업을 진행한다. 

도구칸에 는 Flash 에 서 작업 을 하는데 필요한 도구들이 들어있 다. 
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Timeline 에서는 시 간에 따라 Movie 의 내용을 구성한다. Flash 에서는 필림처 럼 시 간 
의 길이를 프레임으로 나눈다. 매 프레임은 자기의 고유한 내용을 가질수도 있고 이전 프 
레임의 내용을 사용할수도 있다. 그리고 작업을 쉽게 하기 위하여 여 러개의 층 (Layer) 을 
리용한다. 제일 아래에 있는 층이 배경으로 되고 그우의 층은 배경우에 놓이게 된다. 


|:: w Timeline 
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조색판에는 여러가지가 있는데 표준적으로 색혼합판 (Color Mixer Panel), 색조각 
판 (Color Swatches Panel) , 구성 요소판 (Components Panel) , 회 답판 (Answers 
Panel), 속성 판 (Properties Panel) , Action 판 (Actions Panel) 이 표시된다. 이 밖의 조 
색 판들은 Window 차림 표의 지 령 들을 실 행하여 나타나게 할수 있 다. 


■■■ 




장아겨 기 



노어！ 쑈獨，難께노 

Macromedia Flash MX 의 일반적특징 

Flash 는 원래 웨브 (web) 에서 사용할수 있는 동화상을 만드는것을 목적으로 
나온 도구이다. 그후 점차 그 응용이 광범해지고 수많은 기능들이 추가되면서 간 
단한 동화상으로부터 여러가지 목적의 다매체제작에 이르기까지 다양하고 강력한 
기능을 제공해주는 도구로 발전되 였다. 

Flash 는 시간선을 리용하여 각종 정지화상과 동화상，소리와 같은 다매체소 
재 들을 원만히 처 리할수 있고 사용자대 면부와 Action Script 를 리 용하여 프로그 
람작성언어 와 같은 다양한 기 능을 실현할수 있으므로 현재 다매 체제 작에 광범 히 
리 용되고있 다. 

① 특별한 전문지식이 없이도 쉽게 


한 동화상을 제작할수 있으며 음성의 


삽입 파 가공도 가능하다. 득히 호상작용하는 동화상을 제 작하는데 서 효파적 이 다. 
이런 매체를 Flash 에서는 영화나 동화상과 구별하여 Movie 라고 한다. 

② Flash 의 강력한 동화상기능과 Action Script 기능을 결합하여 훌륭한 를 
퓨터유희들을 만들수 있다. 

③ 각종 다매체를 쉽게 제작할수 있다. 특히 교육용다매체제작에 널리 리용 
되고있으며 광고나 선전물제작과 같은 많은 분야에 리용되고있다. 
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2 .구모양만들기 



원의 테 두리색 (Stroke Color ) 을 선택 하기 위 하여 도구칸의 Colors 에 있는 테 두리색 
선택4각형을 찰칵한다. 그러면 색조각판이 나타난다. (아래 왼쪽그림) 여기서 해당한 색을 
선택 한다. 쓰러는 색 이 조색 판에 없으면 조색 판의 오른쪽 웃구석 에 있는 원형단추를 찰칵 
하여 나타나는 색 혼합판에서 색을 지정 하면 된다. (오른쪽그림) 


|#oooooo 0| ⑩ | 




마찬가지방법 으로 채 우기 색 (Fill Color ) 도 설정 해 준다. 

테두리선의 굵기와 모양은 무대아래에 있는 속성판에서 설정한다. 
테두리색선택4각형의 옆에 있는 칸에 5라고 입력한다. 
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② 다음 새 층을 만들고 중심원주위를 돌아갈 푸른색의 원을 하나 더 그린다. 



③ 도구칸에서 선택도구 를 리용하여 돌아갈 푸른색 원을 선택한다. 

선택 도구는 무대 에 있는 모형 들을 선택할수 있게 한다. 선택 도구의 Option (추가선택 ) 
에는 Snap to Object , Smooth , Straighten 이 있다. 

Snap to Objects : 모형 을 이동시 킬 때 Grid , Guide 등에 맞추어 준다. 

Smooth : 선택 한 곡선을 부드럽게 해춘다. 

Straighten ： 선택한 곡선을 직선토막으로 만든다. 

선택 하는 방법에는 마우스를 끌기 하여 선택 하는 방법과 원의 내부를 두번 찰각하는 방 
법이 있다. 

④ 색혼합판에서 Radial (방사형)을 선택한다. (아래 왼쪽그림) 




52 

















































































⑤ 가운데 나타나는 경사도막대기의 10%쯤 되는 위치를 찰칵하여 색조종점을 하나 
추가한다. (오른쪽그림 ) 마찬가지 방법 으로 색 조종점 을 3개 더 추가한다. 

매 색조종점의 색을 다음과 같이 설정한다. 

첫번째: R = G = B =255 두번째: R =0， G =200， B =255 

세번째: R =0， G =0， B =50 네번째: R = G = B =0 
다섯번째: R =0， G =0， B =50 여섯번째: R = G = B =255 



⑥ 원형도구의 테 두리 색 을 No Color (색없애 기)로 설 
정 한다. 

⑦ 무대에 원을 그리고 Fill Transform (변형채우기) 

도구 로 경사도를 조절하여 원에 반사점 이 나타나게 
한다. 이렇게 하면 구가 립체감이 나게 보인다. 



색없애기설정단추 


]: 


이 


도구는 경사도무늬의 크기，방향，중심을 조절할 때 리용한다. 

구를 선택하고 경사도무늬가 적용된 부분을 찰칵한다. 그러면 그림과 같이 조종점 


들이 표시된다. 
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가운데 있는 점은 경사도중심점이고 4각형모양의 점은 경사도의 가로세로비，다음조종 
점은 크기，마지 막조종점은 경사도방향을 조종하는 점 이 다. 

⑧ 원을 선택하고 차림표띠에서 Modify ᅳ Group 지령을 실행 한다. 

그러면 원이 묶음화된다. 




① 무대의 푸른색구에서 오른쪽찰칵한다. 

② 이때 나타나는 지름차림표에서 Convert to Symbol 을 선택한다. 


54 











Registration: 


Behavior: Movie Clip 

Button 
■ Graphic 


Advanced 


Cancel 


Help 


Name: 


□ K 


③ Convert to Symbol 대화칸의 Behavior 항목에서 Graphic 를 선택하고 OK 단 
찰칵한다. 


그러면 푸른색구가 Graphic Symbol 로 된다. Symbol 은 다시 사용할수 있는 도형， 
단추， Movie Clip 이 다. 

④ Timeline 에서 Add Guide Layer 를 찰칵한다. 

그러면 Guide Layer 가 만들어 진것을 볼수 있다. 



9K i □ 



D Layer 2 
D Layer 1 

段 A-D 


• • 


• • 




⑤ Guide Layer 가 선택된 상태에서 원형 
Color 를 No Color 로 설정한다. 

⑥ Stage 에 타원을 하나 그린다. 


선택하여 Colors 항목에서 Fill 



:: Guide: La... 


Layer 2 




Timeline 


Timeline 


□ □□ 

□ □□ 
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⑦ Layer 2와 Guide Layer 의 15 번 프레 임 을 각각 오른쪽찰칵하여 Insert 
Keyframe 을 선택한다. 


Timeline 


A 邊 □ 


i 


5 


10 


15 


20 


25 


30 


35 



Guide: La. 



D Layer 2 
D Layer 1 

예 D 


+ * 


暑 + 


■ 


■ IB B B 



Create Motion Tween 


Insert Frame 

Remove Frames 


Insert Keyframe 


Insert Blank Keyframe 

Clear Keyframe 

Convert to Keyframes 
Convert to Blank KeyPrarmes 

Cut Frames 
Copy Frames 
Paste Frames 
Clear Frames 
Select All Frames 

Reverse Frames 
Synchronbe Symbols 

Actions 

녀 Properties 


^ □ 


5 


10 


li 


20 


Guide: La.. 


* * 



Layer 2 



D Layer 1 


* * 


진 -A n 


© 


■ 


1 


■ 


■ 


o 


Jj □ 卜 bl [ 亡 l| [-]|| 15 12.0 f| 


⑧ Layer 2 의 15 번 프레 임 을 선택 하고 도구띠 에서 선택도구를 선택 하여 푸른색 구를 
이동시 킨다. 구를 이동시 킬 때 구의 가운데 작은 원형 아이콘이 생기는데 이것 이 타원에 놓 
이게 한다. 
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⑨ 같은 방법으로 Layer 2 와 Guide Layer 의 30 번， 45 번， 60 번 프레임에 
Keyframe 을 설정하고 푸른색구의 위치를 옮겨놓는다. 하여 60 번 프레임동안에 푸른색구 
가 타원을 따라 한바퀴 돌도록 한다. 

⑩ Layer 1 의 60 번 프레 임을 선택하고 오른쪽찰칵하여 Insert Frame 을 선택한다. 

⑪ Layer 2 를 선택하고 임의의 프레임에서 오른쪽찰칵하여 Create Motion Tween 
을 선택한다. 


Timeline 


h* □ I 5 10 15 20 25 30 35 40 45 



■ 


■ 


D Layer 


* + 


與 iVD 




Create Motion Tween 


m 


■ 


■I 던 I H\ [-]| 


60 


12 


Insert Frame 
Remove Frames 






Insert Keyframe 
Insert Blank Keyframe 
Clear Keyframe 
Convert to Keyframes 
Convert to Blank Keyframes 


그러면 Layer 2 에 화살표가 표시된다. 
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⑫ Enter 건을 누르면 푸른색구가 타원궤도를 따라 돌아가는것을 볼수 있다. 
⑬ 차림표띠 에서 File\Export Movie 를 실행 한다. 

이때 나타나는 대화칸에 적 당한 이름을 주고 Save 를 찰칵한다. 

여기서는〈〈행성의 움직임묘사》라고 이름을 주고 Save 를 찰칵한다. 

⑭ Export Windows AVI 대화칸에서 필요한 설정을 하고 OK 를 찰칵한다. 


Export Windows AVI 



Width 


Height 


Dimensions: 


320 


X 


233 


pi: ■: els 


v Maintain aspect ratio 


Video Format: 


1G bit color 


u 


ᅳ Compress video 
v Smooth 


□ 


Sound Format: 


Disable 



OK 


Cancel 


Help 


그러면 Video Compression 대화칸이 나타나는데 여기서 필요한 설정을 하고 OK 단추 
를 찰칵한다. 

그러면 동화상이 만들어진다. 이때 Guide Layer 는 표시되지 않는다. 
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Flash 의 결과출력 


Flash 에서는 차림표띠의 File_>Publish 지 령으로 결과물을 출력 한다. 

Flash 에서 출력가능한 파일형식에는 swf, gif, bmp, jpg, png, dxf(Auto 
CAD 파일)， emf, eps, mov(Quick Time), wav, avi, ai(Adobe Illustrator 파 
일)， wmf(Windows Metafile) 등이 있다. 

매 파일형식에 대한 설정은 차림표띠의 File—Publish Settings 지령으로 진행한 
다. File-^Publish Settings 지 령을 실행하면 다음과 같은 대화칸이 나타난다. 



Flash 에 서 는 표준적 으로 swf 와 그것 을 삽입 할 문서 인 html 로 결 과를 출력 하도 
륵 설정되 여있다. Publish Settings 대화칸에서 출력 하려는 형식을 선택 하면 그 형식 
으로도 출력된다. 

swf 는 Flash 의 가장 기본적 인 파일형식 이 다. 

파일형식을 선택한 다음 Flash 표쪽을 찰칵한다. 
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Version ： 어 느 판번호로 출력할것 인가를 설정 한다. 

낮은 판번호용으로 출력하는 경우 그 판번호이상에서 지원하는 기능을 사용하면 
안된다. 

Load Order ： Bottom Up 과 Top Down 이 있다. 

Movie 가 전송될 때 어느 Layer 로부터 보이게 할것인가를 설정한다. 

Options : Generate size report , Project from import , Omit Trace actions , 
Debugging Permitted , Compress Movie 가 있다. 

Generate size report : Movie 의 정 보를 자세 히 알려 주는 문서 파일을 작성 한다. 

Project from import : Flash Movie 를 Import 할수 없도록 한다. 일반적으로 
Flash 에서는 swf 를 Import 할수 있 다. 그러 나 이 기능을 리 용하여 보존 
한 Movie 는 Flash 로 Import 할수 없다. 

Omit Trace actions : Movie 에 있는 Trace Action 을 무시 하도록 한다. 그러 면 
출력 창문에 Trace Action 정 보가 표시 되지 않는다. 

Debugging Permitted ： Debug 를 활성화한다. 이것을 선택하면 Flash Movie 
에 암호를 걸어 보호할수 있다. 

Compress Movie : Flash Movie 를 압축하여 파일 크기 및 Download 시 간을 줄 
인다. 
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Password ： Debug 를 허용한 경우 여기에 암호를 입력하면 다른 용자가 
Flash Movie 를 Debug 하지 못한다. 

JPEG Quality ： 값이 클수륵 질이 좋아지지만 용량이 커진다. 

Audio Stream , Audio Event ： 음성의 Option 을 설정한다. 

Override sound settings : 음성설정을 무시한다. 

필요한 설정을 한 다음 HTML 표쪽을 찰칵한다. 

웨브열 람기 에서 Flash Movie 를 재생 하려면 Movie 를 활성화하고 Browser 설정 
을 지정하는 HTML 문서가 필요하다. 



Template ： Flash Movie 의 재생과 관련되 여있는 Template 를 설정 한다. 

Template 는 Flash 가 설치된 등록부의 First RunVHTML 에 생성된다. 
Template 파일은 Template 변수를 포함하는 문서파일이거나 ColdFusion 
또는 ASP 코드일수도 있다. 

Dimensions : Flash Movie 가 보일 크기를 설정한다. 

Play Back ： Movie 의 재생 Option 을 설정 한다. 

Paused At Start : 사용자가 Movie 에서 단추를 찰칵하거 나 재생을 선택 할 때까 
지 Movie 를 일시 정지시 킨다. 
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Loop ： Mo vie 를 반복한다. 

Display Menu ： Movie 를 오른쪽찰칵하였을 때 지름차림표가 표시되게 한다. 
Device Font : Windows 체 계 에 서 만 쓸수 있 는데 체 계 에 없는 Font 를 
Antialias (굴곡제거)처 리된 다른 Font 로 표시 하게 한다. 

Quality ： Movie 의 질을 설정한다. 

Window Mode : 창문의 방식을 설정한다. 

HTML Alignment ： 웨브열람기에서 Flash Movie 의 위치를 정한다. 

Scale ： Movie 의 원래 가로세로 크기를 변경한 경우 Movie 의 보임크기를 설정 
한다. 

Flash Alignment ： Movie 크기가 열람기의 창문보다 클 때 어느쪽을 기준으로 
잘라서 보여줄것 인가를 설정 한다. 

Show Warning Messages : 오유가 있을 때 오유통보를 보여준다. 

Symbol 에 대하여 

Flash 에서는 Stage 에서 만들어 지는 모형이 자동적으로 Library 에 등록되지 않 
는다. Stage 에서 만든 모형을 Library 에 보관하려면 모형을 Symbol 로 변환해 야 한 
다. Symbol 은 다시 사용할수 있는 도형，단추 ， Movie Clip 이 다. 

매 Symb 이에는 편집가능한 자기의 고유한 Timeline 이 있고 Symbol 안에 다른 
Symbol 이 있을수 있다. 

Symbol 은 Library 에서 Stage 로 끌기하여 언제든지 사용할수 있으며 반복사용 
한다고 하여 용량이 증가하지는 않는다. 

Symbol 에는 Graphic Symbol , Button Symbol , Movie Clip 이 있다. 

• Graphic Symbol 

Graphic Symbol 은 도형을 독립적으로 관리 하기 위 하여 리용한다. 

Graphic Symbol 은 Movie Clip 처 럼 Timeline 에서 Play 할수 없다. 단순히 모 
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도구칸에서 Fill Transform 도구를 찰칵하여 경사도무늬의 방향을 바꾸어준다. 



타원을 선택하고 Ctrl+T 건을 눌러 Transform Panel 을 연다. 



Transform Panel 에서 Copy and apply transform 을 찰칵하여 타원을 제자 
리 에 하나 더 복사한다. 

다음 Rotate 에 -120 을 입력하고 이동시킨다. 
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마찬가지방법 으로 타원을 하나 더 복사하여 이 동시 킨다. 



다음 원형도구를 선택하고 Fill Color 를 Radial Gradient 로 정하고 원을 하나 
그린다. 그리고 Fill Transform 도구로 반사점의 위치를 적당히 조절하고 타원들의 
가운데에 배치한다. 



이렇게 하면 프로펠라가 완성된다. 물론 빛관계를 정확히 고려하지 못하였다. 
이제는 도구칸에서 선택도구를 선택하고 Stage 에서 끌기하여 모두 선택한다. 
다음 차림 표띠 에 서 Insert—Convert to Symbol 지 령 을 실 행 한다. 


Insert 


Modify Text Control Wind 


Convert to Symbol. 

. F8 

New Symbol... 

Ctrl+F8 

— ■心 


Scene 

나 —— ■ - - 一 - " 

Remove Scene 
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Name: 

Behavior: ( j Movie Clip 
O Button 
Graphic 


Advanced 



그러면 Conver to Symbol 대화칸이 나타난다. 


Symbol 


Convert 


이 대화칸의 Behavior 에서 Graphic 를 선택하고 OK 단추를 찰칵하면 된다. 그 
러면 Graphic Symbol 로 Library 에 등록된것을 알수 있다. 

Library Panel 을 펼치려면 Ctrl+L 건을 누르면 된다. 



이제 Stage 에서 프로펠라를 선택하여 Delete 건을 눌러 지운다. 

다음 Library 에서 Symbol 1을 끌어서 Stage 에 배치한다. Stage 에 Graphic 
Symbol 을 여 러개 배 치해본다. 




K 

o 


-I- 

C 

n 

a 


Help 


□ □□ 

&□□= 

n: 
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ra 
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그림을 보고 알수 있는바와 같이 Symbol 로 만들어놓으면 언제든지 Library 에 
서 끌기 하는 방법 으로 Stage 에 배 치할수 있 다. 

Stage 에 배치된 Symbol 을 Instance 라고 한다. 즉 Instance 는 Stage 에 있거 
나 다른 Symbol 안에 있는 Symbol 의 복사본이다. 

Instance 의 색，크기는 원래 Symb 이과 다를수 있다. 

Symbol 을 편집하면 모든 Instance 가 갱신되지만 Instance 에 변형을 가해도 
Symbol 에는 영향이 없다. 

• Button Symbol 

Button Symbol 은 ActionScript 와 같이 사용되며 호상작용이 가능하다. 

례를 들면 마우스의 사건에 따라 여 러가지로 변하게 할수 있다. 

ActionScript 란 Flash 내부의 프로그람작성언어 이 다. 

Button Symbol 을 만들어보도록 하자. 

도구칸에서 4각형도구를 선택하고 Stage 에 4각형을 하나 그린다. 


4각형을 모두 (Fill 부분과 Stroke 부분) 선택하고 차림표띠에서 Insert ᅳ Convert 
to Symbol 지 령 을 실 행 한다. 

Convert to Symbol 대 화칸에서 이름칸에 Button , Behavior 에서 Button 을 선 
택 하고 OK 단추를 찰칵한다. 
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그러면 Library 에 Button 이 라는 Button Symbol 이 등록된것 을 알수 있다. 



마우스로 Button 을 두번찰칵하여 Button Symbol 편집방식으로 들어간다. 
Timeline 을 보면 Up , Over , Down , Hit 가 있는것을 볼수 있다. 



Timeline 의 Layer 1에서 Over 가 있는 프레임을 선택한다. 

다음 오른쪽찰칵하여 나타나는 지름차림표에서 Insert Keyframe 을 찰칵한다. 





Down Hit 



— 


Create Motion Tween 


Insert Frame 



마찬가지 방법 으로 Down , Hit 에 키프레 임을 추가한다. 
Over 프레임을 선택하고 4각형의 색을 바꾼다. 

Down 프레임을 선택하고 4각형의 색을 바꾼다. 
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Hit 프레 임은 그냥 놔둔다. Hit 부분은 단추가 마우스와 반응할 령역 이다. 그러므 
로 4각형단추에서 는 따로 설정 해 주지 않아도 된다. 그러 나 문자로 되 여있는 단추인 
경 우 Hit 령역 을 설정 해 주어 야 한다. 그것 은 문자만 있는 경 우 문자우에서 만 단추가 
동작하기 때 문이 다. 

Stage 의 오른쪽 웃구석에 있는 Scene 1을 찰칵하여 Button Symbol 편집방식에 
서 나온다. 



단추의 동작을 시험해본다. 마우스지시자가 단추우에 오면 색이 바뀌고 찰칵하 
면 다시 색 이 바뀌는것을 알수 있다. 


만일 단추가 동작하지 않는다면 차림표띠에서 Control ᅳ Enable Simple 
Buttons 지 령 을 실 행 하면 된 다. 


Control 


Window 


Help 


Play ___ 

Enter 

Ctrl+Alt+R 

製 ^^^^^— _ 

Enable Simple Frame Actions 


Enable Simple Buttons 

Ctrl+Alt+B j 

Mute Sounds 


어 Enable Live Preview 



• Movie Clip 

Movie Clip 은 Flash Movie 의 축소판이 라고 생각하면 된다. Movie Clip 은 자 
체의 Timeline 과 속성을 가지 고있으므로 Animation 을 만들수 있다. 

Movie Clip 은 Graphic Symbol , Button Symbol , Movie Clip 을 포함할수 
있다. 즉 Flash Movie 안에 있는 Flash Movie 로 생각하면 된다. 

앞에서 만든 프로펠라에 Animation 을 주어 Movie Clip 으로 만들어보자. 

Stage 에 프로펠 라 Graphic Symbol 을 배 치 한다. 
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Behavior: •: IMoyie Cli^ Registration: 
(_) Button 
■:: ) Graphic 


Name: 


Advanced 


ConverJjto Symbol 



Cancel 


Help 


Graphic Symbol 을 선택하고 차림표띠에서 Insert*—Convert to Symbol 지령 
을 실행 하여 Movie Clip 으로 보존한다. 


Symbol 2 


OK 


Library 



2 items 



Name 


P~| Symbol 1 
_ Symbol 2 


囚 ® H Q 


| Kind 


Graph □ 

. : □ 

Movie ； 


ini 


로펠라를 선택하고 오른쪽찰칵하여 Edit In Place 를 실행한다. 



Rotate and Skew 
Distribute to Layers 


Edit. 


Edit In Place 


EdiFjh New Wi 

Actil^ 


Window 


Panels 


5wap Symbol... 
Duplicate Symbol... 


그러면 Movie Clip 편집 방식으로 들어간다. 


□ □□ 

□ □□ 
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40 번 프레 임을 선택하고 F 6 건을 눌러 키프레 임을 추가한다. 



:卜39번 프레 임사이의 임의의 프레 임 을 선택한다. 
Properties Panel 의 Tween 에서 Motion 을 선택한다. 




그러면 Timeline 에서 프레 임 이 연보라색으로 바뀌 면서 화살표가 표시된다. 


I 

1 1 1 1 1 

5 

1 1 1 1 1 1 

10 

1 1 1 1 1 1 

1 1 1 1 1 

15 

1 1 1 1 1 

1 1 1 1 1 

20 

1 1 1 1 1 

1 1 1 1 1 

25 

1 1 1 1 1 

1 1 1 1 1 

30 

1 1 1 1 1 

1 1 1 1 1 

35 

1 1 1 1 1 

1 1 1 1 1 

40 

1 1 1 1 1 1 















H 마 | 던 | H\ [.]|| 1 |l2-0fps | 0.0s "< 
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1 

八 


> 


다음 Rotate 에서 CW (시계바늘방향)를 선택하고 times 에는 1을 입력한다. 




Enter 건을 눌러 Animation 을 재생해보면 프로펠라가 돌아가는것을 알수 있다. 
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4 .호상작용만들기 


여기서는 Stage 에 있는 단추를 찰칵하는데 따라 Movie 의 실행을 조종하는 방법을 보 
륵 한다. 


① Flash 를 기동하고 Ctrl +” 건을 눌러서 격자선이 나타나게 한다. 


Tools 


4 A 
O □ 

17 , 

田 次 

0 뺐 

' 必 


View 




Colors 


m 


路 a 


Options 


② 연필 


선택하고 Option 에 서 Smooth 를 선택 한다. 


Options 




| I기 Straighten 

5 | Smooth 
옇 | Ink 


연필도구 



실지 연필로 그린것 과 같은 선이 나 도형 을 만들 때 리용한다. 


연필도구의 Option 에는 Straighten , Smooth , Ink 가 있다. 

Option 에 서 Straighten 을 선택 하면 마우스의 움직 임 을 직 선으로 인식 하고 그린 다. 
그리고 Smooth 를 선택하면 마우스의 움직임을 최대한 부드럽게 표현해주고 Ink 를 선택하 
면 마우스의 움직 임을 그대로 나타낸다. 

다음 그림은 같은 그림을 Option 을 바꾸어 가면서 그린것 이 다. 

첫 번째 것 이 Straighten 이고 다음것 이 Smooth , 그다음이 Ink 이다. 


71 



































































































④ 도구칸에서 부분선택도구를 선택한다. 

부분선택도구 AJ 는 그려진 모형의 모서리를 수정하거나 직선모형을 곡선으로 만들 
때 리용한다. 

부분선택 도구를 리 용하여 4각형 의 모서 리 를 변형 시 켜 보자. 

먼저 Stage 에 4각형을 하나 그린다. 
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도구칸에 서 부분선택 도구를 선택 하고 마우스를 4각형 의 모서 리 로 가져간다. 그러 면 

마우스지시자의 모양이 다□과 같이 변한다. 이때 모서리를 찰칵하여 선택한다. 다음 AU 건 
을 누른채로 모서 리를 끌기하면 모서 리가 곡선으로 바권다. 




그림에서 보는바와 같이 부분선택도구로 도형을 선택하면 조종점들이 표시된다. 
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⑥ 다음 그림에 표시한 조종점들을 부분선택도구로 선택하고 Delete 건을 눌러 없앤다. 












o 

t 니회 

一 

51 










⑦ 다음 개별적인 조종점들을 선택하여 단추를 완성한다. 
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⑧ 다음 도구칸에서 Paint Bucket 도구를 선택한다. 

Paint Bucket 도구 M 는 Fill 부분에 색을 칠해준다. 

Paint 도구의 Option 에는 Gap Size 와 Lock Fill 이 있다. Gap Size 에서는 름이 
을 어떻게 처리하겠는가를 설정한다. 



Options 

O 』 

외 

므 I 


Don't Close Gaps 
Close Small Gaps 
Close Medium Gaps 
Close Large Gaps 



Don ’ t Close Gaps ： 테두리가 완전히 막힌 곳에만 적용된다. 
Close Small Gaps ： 테두리에 미세한 름이 있어도 적용된다. 
Close Medium Gaps ： 테두리에 약간의 름이 있어도 적용된다. 
Close Large Gaps ： 테두리에 큰 름이 있어도 적용된다. 



















































































⑨ Paint Bucket Tool 을 리 용하여 도형의 안에 색 을 채운다. 



⑩ 다음 단추로 쓰일 도형을 Button Symbol 로 보관한다. 
⑪ 다음 선택도구를 선택하고 단추를 두번찰칵한다. 

그러면 단추편집창문으로 들어간다. 



⑫ Over , Down 에 키 프레 임 을 설정 한다. 



Layer 1 


松 41 £] 


흙 크 □ Up | Over t>own| Hit [ 



© I 컨 I [-]|^ 
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⑬ Over 프레임을 선택하고 단추의 색을 바꾼다. 그리고 Down 프레임을 선택하고 단 
추의 색을 바꾼다. 

⑭ 문자도구를 리용하여 Stage 에 《재생》이 라고 쓴다. 



문자도구 



보 


입력할 때 리용한다. 문자、 


찰 칵 하 면 P rope rties 


Panel 에 본문편집을 위한 Option 들이 나타난다. 


Properties 


A 


Static Text 


Tent Tool 


A 

A V 


Times Mew Roman 

V 43 T ▼ 

B 

I X 

-= = 

0 i 

a5 

Normal 

[7| Auto Kern 


| Format... 


1 


德 


AO 


] Use Deuice Fonts 


Target ： 


V 



Stage 에 본문을 입력하기 위해서는 도구칸에서 문자도구를 찰칵하고 Stage 를 다시 찰 
칵한다. 다음 본문을 입 력하면 된다. 


Macro[ 


Macromedia 
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본문을 입력하면 본문칸이 넓어지는것을 알수 있다. 

문자도구를 찰칵하고 Stage 에서 마우스를 끌어 본문입력칸이 나타나게 한 다음 본문 
을 입 력할 때에는 자리 가 다 차면 줄바꾸기 가 진행된다. 


Macro 

- □ 

국 

厂 ? 

Ma 

edi ； 

▼ 〒 

crorn 

a| 


확장가능한 본문칸에 는 오른쪽 웃구석 에 동그라미 가 표시 되 고 확장불가능한 본문칸에 는 
4각형이 표시된다. 4각형표식을 마우스로 두번찰칵하면 확장가능한 본문칸으로 변환된다. 



Properties Panel 을 보면 알수 있는바와 같이 본문에는 Static Text , Dynamic 
Text , Input Text 의 3 가지 종류가 있다. 

Static Text ： 한번 입력한 본문이 변하지 않는다. 

Dynamic Text ： 자동적으로 내용이 갱신되는 본문칸을 만든다. 

Input Text ： 사용자가 본문(홈페지 에서 사용자이름 입 력칸과 같은)을 입 력할수 있는 
본문칸을 만든다. 
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⑮ 마찬가지 방법 으로 단추를 하나 더 만들고〈〈정 지》라고 쓴다. 
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자 

_| 、 
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⑯ 앞에서 만든 〈〈행성의 움직임묘사》파일을 열고 새로운 층을 만들고 《정 
지》， 《재생》단추를 복사하여 불인다. 
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⑫ Layer 3의 1번 프레임을 선택하고 Action Panel 에서 Actions\Movie Control 
\stop 를 두번찰칵한다. 


Actions - Frame 



3 Actions for Frame 1 of Layer Name Layer 1 


韻 



그러면 오른쪽에 stop 라고 적혀진것을 볼수 있다. stop Action 은 Movie 의 재생을 멈 
기능을 수행 한다. 

⑬《재생》 Button Symb 이을 선택하고 Action Panel 에서 다음과 같이 설정한다. 


Actions - Button 



Actions For [No instance name assigned] (Symbol 1) 


V 


|J] Actions 

|J Movie Control 
( 安 } gotoAndPlay 
® gotoAndStop 
® neKtFrame 
® neKtScene 
@ on 

@ prevFrame 
l 受 ) prevScene 
® stop 


play 




A 


+ ，能 © … ■ (륜 ^ ^ 


1 on (press) { 

2 playO ； 


Line 3 of 3, Col 2 
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⑮《정지 》 Button Symbol 4- 선택 하고 Action Panel 에서 다음과 같이 설정 한다. 


E 


Actions - Button 



%3 Actions for [No instance name assigned] (Symbol 2 ) 


V 


韻 


_ Actions 

Movie Control 
® gotoAndPlay 
® gotoAndStop 
® neKtFrame 
® neKtScene 
@ on 
® play 
@ prevFrame 
® prevScene 


a 



+ ，約 © … ■ 煙 ^ ^ 


on (press) { 

2 stopO; 



> 


Line 3 of 3., Col 2 


Mo vie 를 실 행 시 켜 본다. 

그러면 단추를 찰칵하는데 따라 Movie 재생이 정지되였다 실행되였다 하는것을 알 
수 있다. 
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경 을 


실습 1. Motion Tween 에 의한 Animation 만들기 

① Stage 에 4각형을 하나 그린다. 



② 4각형 을 Rectangle 이 라는 Graphic Symbol 로 보존한다. 



③ Timeline 의 15번 프레 임 에 키 프레 임 을 추가한다. 


- 

I 5 10 I 

"I 

5 20 1 t 

여 

• □ 

w 1」■유 



시 



v 

유 I H\ [.]|| 15 

12.0 f P L > 

n 히프^^^^』 



82 

















































④ 15번 프레임을 선택하고 4각형의 위치를 적당히 옮긴다. 
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⑥ 30번 프레 임 에 키프레 임을 추가한다. 

⑦ 30번 프레임을 선택하고 4각형의 위치를 적당히 옮기고 크기를 조절하고 회전시 
킨 다. 

⑧ 45번 프레 임 에 키프레 임을 추가한다. 

⑨ 45번 프레임을 선택하고 4각형을 선택하여 Delete 건을 눌러 삭제한다. 

⑩ 1번 프레 임을 선택하고 4각형을 복사한다. 

⑪ 45번 프레 임을 선택하고 Ctrl + Shift+V 건을 눌러 그자리에 붙여놓는다. 



⑫ 1~45번 프레 임전체를 선택하고 오른쪽찰칵하여 Create Motion Tween 을 실행 한다. 



⑬ Enter 건을 눌러 Movie 를 재생해본다. 

4각형 이 회전하면서 크기 가 변하는것을 알수 있다. 

⑭ 1번 프레 임에 있는 4각형을 선택한다. 

⑮ Properties Panel 의 Color 항목에서 Advanced 를 선택한다. 



⑯ Settings 단추를 찰칵하면 Advanced Effect 대화칸이 나타난다. 
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Advdnced£ffect 



Advanced Effect 대 화칸의 첫번째 입 력칸에 4각형의 원래 색 의 몇 %인가를 설정 해 준다. 
다음입 력 칸에 RGB Alpha 값을 입 력 하면 된 다. 

⑫ 1번 프레 임의 4각형을 빨간색 ( R =255， G = B =0) 으로 만들기 위 하여 첫번째 입력 칸 
에는 R =0， G =0， B =0， Alpha =100 으로 입력한다. 이렇게 되면 4각형의 원래색이 영향을 
미치지 못한다. 

두번째 입 력칸에 는 R =255， G = B =0 으로 입 력 한다. 



그러면 4각형 이 빨간색으로 변하는것을 알수 있다. 
⑬ 15번 프레임의 4각형을 선택한다. 
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⑬ 앞에서 와 같이 4각형 의 색 이 풀색 ( G =255) 으로 되 게 한다. 



⑩ 30번 프레 임 의 4각형 의 색 을 푸른색 ( B =255) 으로 설정 하고 투명 도를 0으로 한다. 



⑫ 45번 프레 임 의 4각형 의 색 을 빨간색 ( R =255) 으로 설 정한다. 

⑫ Enter 건을 눌러 Movie 를 실행해본다. 

4각형의 색이 변하는것을 알수 있다. 그리고 30번 프레임에서는 4각형이 없어졌다가 
다시 생 겨난다. 
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실습 2. Shape Tween 에 의한 Animation 만들기 


① 도구함에서 문자도구를 선택 한다. 

② Stage 에 Macromedia 라고 입 력 한다. 


Macromedia 


③ 문자를 모두 선택하고 차림표띠에서 Modify—Break Apart (혹 
실행 한다. 


Modify 


Text Control Window Help 


Layer... 


■볘 以 


Ungroup 


Ctrl+G 

Ctrl+Shift+G 


Break Apart Ctrl+B 


Distribute to Layers Ctrl+ShiPt+D 


그러면 문자들이 갈라전다. 


Macromedia 


Ctrl + B ) 지령을 
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④ Ctrl + B 건을 누른다. 그러면 문자들이 도형으로 변한다. 


Macromedia 


⑤ 40번 프레 임 에 빈 키프레 임을 추가한다. 

⑥ 문자도구를 리용하여 Stage 에 FLASH 라고 입 력 한다. 


FLASH 


⑦ Ctrl + B 건을 두번 눌러 문자를 도형으로 변환한다. 

⑧ 1~39번사이의 임의의 프레임을 선택한다. 

⑨ Properties Panel 의 Tween 항목에서 Shape 를 선택한다. 
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그러면 Timeline 에서 프레임들이 연풀색으로 표시된다. 


1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 n 

I 5 10 15 1 

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 

i i i i i i i i i i i i i i i i i i i i i i i 

25 30 35 40 

1 i i i i i i i i i i i i i i i i i i i i I 

hH 

! 

^ 

A 

V 

_ ■ 

■__ 

t % ft [■】 20 12.0 fps 1.6s < > 


Motion Tween 이 적용되였을 때에는 Timeline 의 프레임들이 연보라색으로 표시된다. 

* - ? * Motion Tween 은 시 작키 프레 임 이 검 은색 점 으로 표시 되 고 

가운데프레 임 에는 연보라색배 경 에 검은색화살표가 표시된다. 

* - } • Shape Tween 은 시 작키 프레 임 이 검 은색 점 으로 표시 되 고 가운 

데프레 임 에는 연륵색배경 에 검은색화살표가 표시된다. 

,- \ 마지막키프레임이 없는것과 같이 Tweening 이 제대로 구성되지 

않은 경우에는 점선이 나타난다. 



□ 


단일키 프레임은 검은색점으로 표시된다. 회색 프레임에는 앞의 


레 임 과 같은 내 용이 포함되 여 있으며 마지 막프레 임 에 는 빈 4각형 이 표시 된다. 


0 . 


卜 animation 



Frame Action 을 지정한 프레임에는 소문자 a 가 표시된다. 
프레 임 에 Label 이 포함되 여있으면 빨간색 기 발이 표시된다. 
프레 임 에 Anchor 이 름이 붙어있으면 노란색 닻이 표시 된다. 


프레임에 Anchor 이름을 붙이면 전진 또는 후진단추를 리용하여 프레임사이 혹은 장 
면사이를 이동할수 있으므로 Movie 탐색이 간단해진다. 

이와 같이 Timeline 에서 프레 임의 표시방법 이 다 다르다. 

⑩ 작업 내용을 출력 한다. 

결과를 보고 알수 있는바와 같이 Macromedia 라는 문자가 모양이 달라지면서 FLASH 
로 변하는것을 알수 있다. 
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실습 3. Shape Hint 를 리응한 Animation 만들기 


① 문자도구를 리용하여 Stage 에 1이 라고 입 력 한다. 

② 선택도구를 선택하고 Ctrl + Alt 건을 누르고 끌기하여 하나 더 만든다. 




③ 문자들을 선택하고 Ctrl + B 건을 눌러 도형으로 변환한다. 

④ 30번 프레 임 에 빈 키프레 임을 추가한다. 

⑤ 문자도구를 리용하여 Stage 에 2라고 입 력 하고 하나 더 복사한다. 



⑥ 문자들을 도형으로 변환한다. 

⑦ 1〜29번사이의 프레임을 선택하고 Properties Panel 의 Tween 에서 Shape 를 선택 
한다. 

⑧ Enter 건을 눌러 Movie 를 재생해본다. 

⑨ 1번 프레 임을 선택한다. 

⑩ 차림 표띠 에 서 Modify — Shape—Add Shape Hint 지 령 을 실 행 한다. 
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Modify 


Text Control Window Help 


Layer,., 

Scene.,. Ctrl+U 

Document... Ctrl+M 


Smooth 

Straighten 

Optimize... Ctrl+Alt+Shift+C 

Shape ► 

Convert Lines to Fills 

Expani_=ill... 

Softeri'l Edges... 

ᅳ ▼ ■ᅩ 

Swap Symbol... 

Duplicate Symbol... 

5'A'ap Bitmap... 

Trace Bitmap... 

Add Shape Hint Ctrl+Shift+H 

All Hu 

1 


그러면 Stage 에 원안에 a 라고 씌여진 모형이 생긴것을 볼수 있다. 



⑪ Shape Hint 를 하나 더 추가한다. 이번에는 b 라고 씌여져있다. 
⑫ a , b 를 수자 1의 우아래 에 다음그림과 같이 이동시 킨다. 
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⑬ 30번 프레 임을 선택한다. 

⑭ a , b 를 다음그림과 같이 이동시 킨다. 



⑮ Enter 건을 눌러 Movie 를 재생해본다. 
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Shape Hint 를 리용한쪽이 자기 모양을 비교적 유지하면서 바뀌는것을 알수 있 
다. Shape Hint 는 최 대 26개까지 사용할수 있다. 


실습 4. Mask 를 리용한 Animation 만들기 

① Properties Panel 에서 Background 를 찰칵하여 Movie 의 배경색을 검은색으로 
설정 한다. 



② 도구칸에서 문자도구를 선택하고 Macromedia Flash 라고 입력한다. 


Macromedia Flash 


③ Transform Panel 에서 Copy and apply transform 을 찰칵하여 그 자리 에 복사 
한다. 

④ 문자의 색을 약간 어두운 회색으로 바꾸어준다. 

⑤ 문자를 약간 이동시켜 립체감이 나게 한다. 
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⑥ Timeline 에서 Insert Layer 를 찰칵하여 Layer 를 추가한다. 

⑦ Layer 2의 1번 프레 임을 선택한다. 

⑧ 원형도구를 리용하여 Stage 에 원을 그린다. 


Macr 



Flash 


⑨ 방금 그린 원을 선택하고 F 8 건을 눌러 Convert to Symbol 대화칸을 연다. 

⑩ mask 라는 Graphic Symbol 로 보존한다. 

⑪ Layer 2의 20，40번 프레 임 에 키 프레 임 을 추가한다. 

⑫ Layer 1의 40번 프레 임을 선택하고 오른쪽찰칵하여 Insert Frame 을 실행하여 40번 
프레임까지 늘인다. 



⑬ 1번 프레 임에 있는 mask Graphic Symbol 을 선택하고 왼쪽으로 이동시킨다. 


^^^Aromedia Flash 
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⑭ 20번 프레 임에 있는 mask Graphic Symbol 을 선택하여 오른쪽으로 이동시 킨다. 



Macromedia 


⑮ 40번 프레임에서는 1번 프레임에서와 같은 위치에 놓이게 한다. 

⑯ 1~39번 프레 임을 선택하고 오른쪽찰칵하여 Create Motion Tween 을 실행한다. 


5 10 15 20 25 30 35 4] 



U %1 컨 1 히 년 I 40 | 12.0 fps | 3.3s 소 I 




⑫ Timeline 에서 Layer 2를 선택하고 오른쪽찰칵하여 Mask 를 실행한다. 


■ i □ 



■edit 


Movie 를 실행해보면 Layer 2의 원형부분에서만 글자가 보이는것을 알수 있다. 
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